Select KIT

Examples API Setup
Source code
See also
ComboBox, MultiSelectSelect is a form control for selecting a single value from a set of options, similar to the native <select> element.

Textfield customization

#

Use all powers of Textfield : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore Textfield documentation page for more customization options.

Items handlers

#

Use tuiItemsHandlersProvider to override default behavior of all Select -s below the current DI scope.

Use input properties [identityMatcher] / [stringify] / disabledItemHandler (from Textfield ) to do the same for the specific Select only.

Customize content

#

DataListWrapper provides an opportunity to customize appearance of options inside dropdown by [itemContent] -property. Also, Textfield has [content] -property to customize appearance of selected option inside textbox.

Both properties accept PolymorpheusContent – it empowers you with extremely large possibilities for customization.

With DataList

#

DataListWrapper is just a helper to solve most popular use cases. Use DataList for more complex cases when great flexibility is required. DataList documentation page for more customization options.

Choose form control output

#

DataList exposes Option -directives – it provides you with an opportunity to decide which data type put inside its [value] .

This example demonstrates how every option can be a complex object with any structure but form control contains a single id-property as number -type.

Terry Jones

Form control:777

Virtual scroll

#

You can use Select with virtual scrolling from @angular/cdk/scrolling .

With DropdownMobile

#

Use real mobile device or enable mobile emulation in DevTools to explore this example!

Put tuiDropdownMobile="..." on <tui-textfield /> to enable sheet dialog (instead of default dropdown) with special appearance of options (similar to native controls) for mobile devices .

This example demonstrates different appearances of options for different platforms (using TuiPlatform directive). By default, it detects ios / android / web platforms automatically (by parsing user agent) – it is not required to specify it explicitly.

Native picker with disabled option

#

Put <select tuiSelect/> (instead of <input tuiSelect/> ) to enable native browser picker.

This example demonstrates how enable this feature for mobile devices only.

Native picker with grouping options

#

Override option component

#

You can override default behavior and appearance of all options inside dropdown. Just provide your custom component by tuiAsOptionContent -utility. Double check if you really need this feature!
For the most cases <tui-data-list-wrapper [itemContent]="..." /> can be enough for your task.
Explore this example for more details.