ComboBox LEGACY

Examples API Setup

Dark mode Background

-

Set a value with copied object from items to check identityMatcher :

Name and description	Type	Value
`disabled` Disabled state (use `formControl.disable()` )	`boolean`
`[(search)]` Textfield value to subscribe on input or setting it from the outside (emits `null` when item from list selected)	`null \| string`
`[identityMatcher]` A function that compares search and value to define a match between them. Must be a pure function	`TuiIdentityMatcher`	`(item1,item2)=>item1===item2`
`[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`
`[strictMatcher]` A function that compares search text and item to define a match between them. Lowercase string comparison function by default. Should be a pure function	`TuiStringMatcher \| null`	`(item,search,stringify=String)=>stringify(item).toLowerCase()===search.toLowerCase()`
`[stringify]` A function that transforms object into a string. `String(value)` by default. Should be a pure function	`TuiStringHandler`	`function String() { [native code] }`
`[valueContent]` A template for custom view of selected value	`PolymorpheusContent`	`''`

Can be expanded with TuiDropdown

Requires you to import TuiDropdown

Name and description	Type	Value
`[(tuiDropdownOpen)]` Manual control/monitor for the dropdown being visible	`boolean`
`[tuiDropdownAlign]` Align of dropdown (does not work together with `limitWidth === 'fixed'` )	`TuiDropdownAlign`	`'left'`
`[tuiDropdownDirection]` Set a vertical direction of dropdown	`TuiVerticalDirection \| null`	`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`

Can be expanded with TuiHint

Requires you to import TuiHint

Name and description	Type	Value
`[tuiHintContent]` Content of a hint	`PolymorpheusContent`	`''`
`[tuiHintDirection]` Hint direction	`TuiHintDirection \| TuiHintDirection[]`	`'bottom-left'`
`[tuiHintAppearance]` Hint mode	`string`	`''`

Can be expanded with TuiTextfieldController

Requires you to import TuiTextfieldControllerModule

Name and description	Type	Value
`[tuiTextfieldCleaner]` Shows a cross to reset a value	`boolean`
`[tuiTextfieldCustomContent]` Right content (e.g. avatar with maximum size 32x32px)	`PolymorpheusContent`	`''`
`[tuiTextfieldLabelOutside]` Label is outside a component and made with `Label` ( `labelOutside = false` does not work together with `size === 's'` : for s-size inputs use only outside labels)	`boolean`
`[tuiTextfieldSize]` Size	`TuiSizeS \| TuiSizeL`	`'l'`
`[tuiTextfieldIconLeft]` A left icon. It can be stringified svg.	`string`	`''`
`[tuiTextfieldFiller]` Pale text suggestion for input (e.g. HH:MM:SS for time)	`string`

Inherited from `TuiReactiveControl`

Name and description	Type	Value
`[readOnly]` Component is read only	`boolean`
`[pseudoInvalid]` Set invalid state regardless of control	`null \| boolean`	`null`

Inherited from `TuiInteractive`

Name and description	Type	Value
`[focusable]` Element can be focused	`boolean`
`[nativeId]` Native ID attribute for element. It helps users with Screen Readers to use a page	`string`
`[pseudoHover]` Visual hovered state	`null \| boolean`	`null`
`[pseudoFocus]` Visual focused state	`null \| boolean`	`null`
`[pseudoActive]` Visual pressed state	`null \| boolean`	`null`
`(focusedChange)` Emits on focus and blur	`boolean`	Emit!