ComboBox KIT
See also
MultiSelect, SelectComboBox is a form control for selecting a single value from a set of options. It is similar to Select but with a major difference – possibility to enter value manually . Basic
# The main helper you’ll use with almost every ComboBox is the tuiFilterByInput pipe. It enables item filtering based on the user’s input as they type.
Non-strict mode
# By default, strict mode is enabled. This means the input value must match one of the options from the data list. If the value doesn't match, the form control is not updated and the input is cleared on blur.
In non-strict mode, the form control can contain any value — even if it doesn’t match any item in the data list.
Form control:null
Client-side filtering
# You can configure any filtering logic by passing a custom matcher function as an argument to the tuiFilterByInput pipe.
Textfield customization
# Take full advantage of Textfield : add any number of Icons and Tooltips (with control over their order and color), adjust the size of the textbox, and more. Explore Textfield documentation page for more customization options.
Server-side filtering
# Pass null as argument to tui-data-list-wrapper[items] to show loader inside the dropdown. Additionally, you can put Loader inside textfield's box.
Pass empty array to tui-data-list-wrapper[items] to show tui-data-list-wrapper[emptyContent] (it accepts PolymorpheusContent ).
Items handlers
# Use tuiItemsHandlersProvider to override the default behavior of all ComboBox -s below the current DI scope.
To customize a specific ComboBox , use the input properties [identityMatcher] / [stringify] / disabledItemHandler (inherited from Textfield ).
Customize content
#DataListWrapper lets you customize the appearance of options inside the 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.
Form control:777
Virtual scroll
# You can use ComboBox 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 a full-screen dialog instead of the default dropdown on mobile devices.
By default, the full-screen dialog hides all other content using visibility: hidden and shifts the textfield to the top of the page. Use --tui-dropdown-mobile-offset css-variable option to control how far the textfield is shifted. If needed, manually set visibility: visible on any hidden elements (e.g., a sticky header) to make them visible again.
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.
<tui-data-list-wrapper [itemContent]="..." /> can be enough for your task. 
Taiga UI