We are currently in alpha version.

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

Radio

Radio buttons are interactive UI elements that allow users to select one option from a predefined set. They provide a clear, intuitive way to make mutually exclusive choices, enhancing decision-making and form interactions.

Basic radio

Option 1

Option 2

Option 3

Optional properties

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

Property	Type	Description
`options`	`{ name: string; value: string; }[]`	An array of options for the radio. Each option should have a name and value.
`variant`	`vertical` \| `horizontal`	Controls radio's variant. `vertical` has vertical orientation, `horizontal` has horizontal orientation. The default variant is `vertical`
`label`	string	Defines the label attached to the radio.
`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 radio component.

Supported directives

These are optional directives for radio content header only

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

Example

Preview

Code

Select a country

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 radio.
`textColor`	Text color of the radio.
`borderColor`	Border color of the radio.
`bgHoverColor`	Background color of the radio when hovered.
`textHoverColor`	Text color of the radio when hovered.
`borderHoverColor`	Border color of the radio when hovered.
`bgFocusColor`	Background color of the radio when focused.
`borderFocusColor`	Border color of the radio when focused.
`labelColor`	Text color of the label
`labelHoverColor`	Text color of the label when hovered
`bgCheckedColor`	Background color of the radio when checked.
`bgCheckedColor`	Background color when checked/p>
`borderCheckedColor`	Border color of the radio when checked.
`checkedColor`	The color of the radio when checked.

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 radio's corners.
`paddingLeft`	Left padding of the radio.
`paddingRight`	Right padding of the radio.
`paddingTop`	Top padding of the radio.
`paddingBottom`	Bottom padding of the radio.
`padding`	Padding around the radio's content.
`width`	Width of the radio.
`height`	Height of the radio.
`fontSize`	Font size of the radio's text.
`fontWeight`	Font weight of the radio's text.
`lineHeight`	Line height of the radio's text.
`letterSpacing`	Letter spacing of the radio'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