We are currently in alpha version.

Please expect changes. If you find any issues, please report them on our github.

Toggle

Toggles are intuitive UI elements that allow users to switch between two states, such as on/off or enabled/disabled. They provide a clear, interactive way to control settings or preferences, enhancing user experience with immediate feedback and streamlined navigation.

Basic toggle

Power mode

Increases battery life by 10%

html

Optional properties

Use the properties below to style the toggle and copy the code to your project. Try clicking on them.

Property	Type	Description
`id`	string	Defines the id of the toggle.
`label`	string	Defines the label attached to the toggle.
`helpText`	string	Defines the help text attached to the toggle.
`customErrorMessages`	string	Provides the ability to set custom error messages.
`zapClass`	string	Allows overriding default styles by passing Tailwind CSS classes. Utilize the `@zaplib/zapui/tailwind` plugin to target specific elements within the toggle component.

Supported directives

Selector	Directive name	Description
`zapLabel`	ZapLabelDirective	Import a directive `ZapLabelDirective` into your component to enable adding any label to a toggle.
`zapFormFieldHelpText`	ZapFormFieldHelpTextDirective	Import a directive `ZapFormFieldHelpTextDirective` into your component to enable adding any help text to a toggle.

Example

Preview

Code

Select theme

Switch between light and dark

Global configurations

A list of global styles, including shape, size, color, font sizes, font weights, and letter spacing can be provided via themeLibrary in the provideZapOption provider.. If you have multi theme setup, you can also provide theme specific colors. These apply to all default variants through out the app unless component level styles are provided.

Example

app.config.ts

Colors

You can provide each of these colors for different themes that you use

Property	Description
`bgColor`	Background color of the toggle.
`rollerColor`	Background color of the roller of the toggle.
`bgOnColor`	Backgorund color of the toggle when on.
`rollerOnColor`	Backgorund color of the roller of the toggle when on.
`labelColor`	Text color of the label.
`helpTextColor`	Text color of the help text

Other styles

You can provide a bunch of other styles, that are not theme based but rather generic

Property	Description
`width`	Width of the toggle.
`height`	Height of the toggle.
`rollerWidth`	Width of the roller of the toggle.
`rollerHeight`	Height of the roller of the toggle.
`labelFontSize`	Font size of the toggle's label.
`labelFontWeight`	Font weight of the toggle's label.
`labelLineHeight`	Line height of the toggle's label.
`labelLetterSpacing`	Letter spacing of the toggle's label.
`fontSize`	Font size of the toggle's text.
`fontWeight`	Font weight of the toggle's text.
`lineHeight`	Line height of the toggle's text.
`letterSpacing`	Letter spacing of the toggle's text.
`helpTextFontSize`	Font size of the toggle's help text.
`helpTextFontWeight`	Font weight of the toggle's help text.
`helpTextLineHeight`	Line height of the toggle's help text.
`helpTextLetterSpacing`	Letter spacing of the toggle's help text.