We are currently in alpha version.

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

Checkbox

Checkboxes are interactive UI elements that allow users to select one or multiple options. They provide a clear, accessible way to toggle settings, make selections, or confirm choices.

Basic checkbox

Checkbox

html

Optional properties

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

Property	Type	Description
`id`	string	Defines the id of the checkbox.
`label`	string	Defines the label attached to the checkbox.
`labelPosition`	`right` \| `left`	Defines the position of the label against the checkbox. By default it's `right`.
`checked`	boolean	Provides the ability to check/uncheck the checkbox. Default is `false`.
`shape`	`curve` \| `flat`	Defines the checkbox shape. `curve` has rounded corners, while `flat` is a classic square-cornered checkbox. Default is `flat`.
`size`	`base` \| `compact`	Controls checkbox sizing. `compact` has less padding, `base` follows the standard theme. Default is `base`.
`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 checkbox component.

Supported directives

Selector	Directive name	Description
`zapLabel`	ZapLabelDirective	Import a directive `ZapLabelDirective` into your component to enable adding any label to a checkbox.

Example

Preview

Code

By clicking this checkbox you accept the terms and conditions

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 checkbox.
`textColor`	Text color of the checkbox.
`borderColor`	Border color of the checkbox.
`bgHoverColor`	Background color of the checkbox when hovered.
`textHoverColor`	Text color of the checkbox when hovered.
`borderHoverColor`	Border color of the checkbox when hovered.
`bgFocusColor`	Background color of the checkbox when focused.
`borderFocusColor`	Border color of the checkbox when focused.
`textCheckedColor`	Text color of the checkbox when checked.
`bgCheckedColor`	Background color of the checkbox when checked.
`borderCheckedColor`	Border color of the checkbox when checked.
`labelColor`	Text color of the label
`labelHoverColor`	Text color of the label when hovered
`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
`borderRadius`	Defines the radius of the checkbox's corners.
`paddingLeft`	Left padding of the checkbox.
`paddingRight`	Right padding of the checkbox.
`paddingTop`	Top padding of the checkbox.
`paddingBottom`	Bottom padding of the checkbox.
`padding`	Padding around the checkbox's content.
`width`	Width of the checkbox.
`height`	Height of the checkbox.
`fontSize`	Font size of the checkbox's text.
`fontWeight`	Font weight of the checkbox's text.
`lineHeight`	Line height of the checkbox's text.
`letterSpacing`	Letter spacing of the checkbox's text.
`labelFontSize`	Font size of the label
`labelFontWeight`	Font weight of the label
`labelLineHeight`	Line height of the label
`labelLetterSpacing`	Letter spacing of the label
`helpTextFontSize`	Font size of the help text
`helpTextFontWeight`	Font weight of the help text
`helpTextLineHeight`	Line height of the help text
`helpTextLetterSpacing`	Letter spacing of the help text