English
latest (v4.7.0)

ComboBox LEGACY

Description and examples API Setup Source code
-

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

Name and descriptionType 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 descriptionType 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
[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 descriptionType Value
[tuiHintContent]
Content of a hint
PolymorpheusContent
''
[tuiHintDirection]
Hint direction
TuiHintDirection
'bottom-left'
[tuiHintAppearance]
Hint mode
string
''
Can be expanded with TuiTextfieldController

Requires you to import TuiTextfieldControllerModule

Name and descriptionType 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 descriptionType Value
[readOnly]
Component is read only
boolean
[pseudoInvalid]
Set invalid state regardless of control
null  |  boolean
Inherited from TuiInteractive
Name and descriptionType 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
[pseudoFocus]
Visual focused state
null  |  boolean
[pseudoActive]
Visual pressed state
null  |  boolean
(focusedChange)
Emits on focus and blur
boolean Emit!