We are currently in alpha version.

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

Select

Select components are interactive UI elements that allow users to choose one or more options from a list. They provide a clear, intuitive way to make selections, enhancing form usability and decision-making.

Basic select

Preview

Code

Select a country

Country

Optional properties

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

Property	Type	Description
`size`	`compact` \| `base`	Controls select sizing. `compact` has less padding, `base` follows the standard theme.
`shape`	`flat` \| `pill` \| `curve`	Defines the select shape. `pill` is a fully rounded select, `curve` has rounded corners, and `flat` is a classic square-cornered select. Default is `flat`.
`icon`	string	Specifies a Font Awesome class for the select's icon (e.g., `fa-globe`).
`iconPosition`	`left` \| `right`	Sets the icon's position relative to the select text. Defaults to `left`.
`position`	`top` \| `bottom` \| `auto`	Sets the position of the select options. `top` and `bottom` are self-explanatory, while `auto` intelligently positions the options to fit within the viewport. Defaults to `auto`.
`multiselect`	boolean	`true` enables multiple selection. Defaults to `false`.
`searchable`	boolean	`false` removes the search bar from the select. Defaults to `true`.
`async`	boolean	Set this to `true` if you want to load options dynamically from an API call during the search. By default, it is set to `false`, which disables async loading.
`id`	string	Defines the id of the select.
`label`	string	Defines the label attached to the select.
`placeholder`	string	Defines the placeholder of the select.
`helpText`	string	Defines the help text of the select.
`searchPlaceholder`	string	Defines the placeholder of the search bar.
`notFound`	string	Defines the message to display when no options are found.
`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 select component.

Optional templates

Use the properties below to provide a custom template for the single select field in the menu

Property	Type	Description
`optionTemplate`	`TemplateRef<any>`	Use this to provide a custom template for the options in the select menu.
`selectedTemplate`	`TemplateRef<any>`	Use this to provide a custom template for the selected option.

Select a country

Country

Supported directives

Selector	Directive name	Description
`zapFormFieldIcon`	ZapFormFieldIconDirective	Import a directive `ZapFormFieldIconDirective` into your component to enables adding any type of icon to a select, including SVGs, font-based icons, and more.
`zapFormFieldHelpText`	ZapFormFieldHelpTextDirective	Import a directive `ZapFormFieldHelpTextDirective` into your component to enable adding any help text to an select.
`zapLabel`	ZapLabelDirective	Import a directive `ZapLabelDirective` into your component to enable adding any label to an inout.

Example

Preview

Code

Select a country

Country

How to correctly choose a country?

Close your eyes and smash the keyboard with your face
Use a fake ID
Select the country you actually live in

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

Shape and Size

Property	Description
`shape`	Defines the shape of the select. Can be `flat`, `curve`, or `pill`.
`size`	Defined the size of the select. Can be `compact` \| `base`

Colors

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

Property	Description
`bgColor`	Background color of the select.
`textColor`	Text color of the select.
`borderColor`	Border color of the select.
`bgHoverColor`	Background color of the select when hovered.
`ringFocusColor`	Ring color of the select when focused.
`headerTextHoverColor`	Text color of the header on hover
`borderHoverColor`	Border color of the select when hovered.
`searchBgColor`	Search background color when hovered.
`searchTextColor`	Text color of the search input
`searchBorderColor`	Border color of the search input
`searchBgHoverColor`	Background color of the search input when hovered
`searchTextHoverColor`	Text color of the search input when hovered
`labelColor`	Text color of the label
`searchPlaceholderColor`	Text color of the placeholder of the search input
`placeholderColor`	Text color of the placeholder
`checkboxBgColor`	Background color of the checkbox
`checkboxBorderColor`	Border color of the checkbox
`checkboxCheckedBgColor`	Background color of the checkbox when checked
`checkboxCheckedBorderColor`	Border color of the checkbox when checked
`checkboxCheckedTextColor`	Text color of the checkbox when checked
`chipBgColor`	Background color of the chip
`chipTextColor`	Text color of the chip
`chipBorderColor`	Border color of the chip
`dismissColor`	Color of the dismiss icon
`dismissHoverColor`	Color of the dismiss icon 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 select's corners.
`paddingLeft`	Left padding of the select.
`paddingRight`	Right padding of the select.
`paddingTop`	Top padding of the select.
`paddingBottom`	Bottom padding of the select.
`padding`	Padding around the select's content.
`checkboxBorderRadius`	Defines the radius of the checkbox's corners.
`checkboxPaddingLeft`	Left padding of the checkbox in the select.
`checkboxPaddingRight`	Right padding of the checkbox in the select.
`checkboxPaddingTop`	Top padding of the checkbox in the select.
`checkboxPaddingBottom`	Bottom padding of the checkbox.
`checkboxPadding`	Padding around the checkbox in the select.
`checkboxWidth`	Width of the checkbox.
`checkboxHeight`	Height of the checkbox.
`searchBorderRadius`	Defines the radius of the search's corners.
`searchPaddingLeft`	Left padding of the search in the select.
`searchPaddingRight`	Right padding of the search in the select.
`searchPaddingTop`	Top padding of the search in the select.
`searchPaddingBottom`	Bottom padding of the search.
`searchPadding`	Padding around the search in the select.
`chipBorderRadius`	Defines the radius of the chip's corners.
`chipPaddingLeft`	Left padding of the chip in the select.
`chipPaddingRight`	Right padding of the chip in the select.
`chipPaddingTop`	Top padding of the chip in the select.
`chipPaddingBottom`	Bottom padding of the chip.
`chipPadding`	Padding around the chip in the select.
`fontSize`	Font size of the select's text.
`fontWeight`	Font weight of the select's text.
`lineHeight`	Line height of the select's text.
`letterSpacing`	Letter spacing of the select's text.
`labelFontSize`	Font size of the select's label.
`labelFontWeight`	Font weight of the select's label.
`labelLineHeight`	Line height of the select's label.
`labelLetterSpacing`	Letter spacing of the select's label.
`searchFontSize`	Font size of the select's search.
`searchFontWeight`	Font weight of the select's search.
`searchLineHeight`	Line height of the select's search.
`searchLetterSpacing`	Letter spacing of the select's search.
`placeholderFontSize`	Font size of the select's placeholder.
`placeholderFontWeight`	Font weight of the select's placeholder.
`placeholderLineHeight`	Line height of the select's placeholder.
`placeholderLetterSpacing`	Letter spacing of the select's placeholder.
`optionFontSize`	Font size of the select's option.
`optionFontWeight`	Font weight of the select's option.
`optionLineHeight`	Line height of the select's option.
`optionLetterSpacing`	Letter spacing of the select's option.
`chipFontSize`	Font size of the select's chip.
`chipFontWeight`	Font weight of the select's chip.
`chipLineHeight`	Line height of the select's chip.
`chipLetterSpacing`	Letter spacing of the select's chip.
`dismissFontSize`	Font size of the select's dismiss icon.
`dismissFontWeight`	Font weight of the select's dismiss icon.
`dismissLineHeight`	Line height of the select's dismiss icon.
`dismissLetterSpacing`	Letter spacing of the select's dismiss icon.
`helpTextFontSize`	Font size of the select's help text.
`helpTextFontWeight`	Font weight of the select's help text.
`helpTextLineHeight`	Line height of the select's help text.
`helpTextLetterSpacing`	Letter spacing of the select's help text.