ComboBox KIT

Dark modeBackground

`[strict]` Value must only be an item of suggestions `<T>` When `false` , make sure your handlers, such as `stringify` can handle `string` value, as well as `<T>` !	`boolean`
`[matcher]` A pure function that compares search text and datalist's items to define a match between them. Lowercase string comparison function by default.	`TuiStringMatcher \| null`	`(e,t,o=String)=>o(e).toLowerCase()===t.toLowerCase()`
ItemsHandlersApplied as a host directive
`[stringify]` A function that transforms datalist's items into a string. `String(value)` by default. Must be a pure function!	`TuiStringHandler`	`t=>t.name`
`[identityMatcher]` Function that matches form control value and datalist's items, e.g. if objects are copied. Uses `===` by default. Must be a pure function!	`TuiIdentityMatcher`	`(t,e)=>t.id===e.id`
`[disabledItemHandler]` A handler that gets a datalist's items and returns true if it is disabled. Must be a pure function!	`TuiBooleanHandler`	`()=>!1`
TextfieldOptionsApplied as a host directive
`[tuiTextfieldCleaner]` Shows a cross to reset a value	`boolean`
`[tuiTextfieldSize]` Size Don't use `label[tuiLabel]` inside `s` - size `<tui-textfield />` ! Use outside label or `<input placeholder="..." />` instead.	`TuiSizeS \| TuiSizeL`	`'l'`
`[content]` A template for custom view of textfield value. We strongly recommend to unset this property on focus – otherwise, it breaks UX on attempt to edit field by keyboard!	`PolymorpheusContent`	`''`
StateManually override interactive state
`[state]` Interactive state ( `null` for automatic)	`TuiInteractiveState \| null`
`[focused]` Focused state ( `null` for automatic)	`null \| boolean`
IconsApplied as a host directive
`[iconStart]` Icon on the left side	`string`	`''`
DropdownApplied as a host directive
`[(open)]` Manual control/monitor for the dropdown being visible	`boolean`
`[tuiDropdownAlign]` Align of dropdown (does not work together with `limitWidth === 'fixed'` )	`tuiDropdownAlign`	`'start'`
`[tuiDropdownDirection]` Set a vertical direction of dropdown	`TuiVerticalDirection \| null`
`[tuiDropdownLimitWidth]` Limit width of dropdown	`TuiDropdownWidth`	`'fixed'`
`[tuiDropdownMinHeight]` Minimum height to calculate that dropdown fits to set `tuiDropdownDirection`	`number`
`[tuiDropdownMaxHeight]` Maximum height of dropdown	`number`
`[tuiDropdownOffset]` Dropdown offset	`number`
`(tuiDropdownDirectionChange)` Dropdown direction change	`TuiVerticalDirection`
ControlApplied as a host directive
`[readOnly]` Readonly state	`boolean`
`[disabled]` Disabled state (use `formControl.disable()/.enable()` for reactive forms)	`boolean`
`[invalid]` Invalid state	`null \| boolean`

Taiga UI

GitHub StackBlitz