Select KIT

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 Input 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.

Virtual scroll

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

Mobile

Put tuiDropdownSheet="Label" 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.