Select
Pick one value from a list — with search, groups, templates, a clear button, free text, long virtual lists and server-side loading.
Basic
Any objects as options. Try ↓ ↑ Enter Esc.
Filter
A search field in the panel. filterBy searches several fields; case and accents are ignored, so lodz finds Łódź.
Groups
Options in named groups. Keys skip the headers; the search keeps a group while one of its options matches.
Disabled options
An option with disabled: true (or the field named by optionDisabled) cannot be chosen; keys and typing skip it.
Clear
showClear adds a button that empties the value; changed reports every change made by the user.
Template
Your own markup for options and the value.
Icons
Pictures in options and in the value through txSelectOption and txSelectValue — icons, logos or flags.
Editable
The field is a text input: any text is the value, unless it matches an option — then the option's value is used.
Loading
loading shows a spinner instead of the dropdown icon while the options are on their way.
Sizes
Three sizes, the same as the other fields.
Variants
filled and readonly — the same field look as the input.
Invalid
Red once the form control is invalid and touched — open and close it without choosing.
Disabled
Disabled through the form control.
Virtual scroll
Ten thousand options: only the visible rows are rendered. Keys keep the active option in view.
Lazy
A list that loads page by page from a server. Rows without data are undefined; lazyLoad asks for them as they scroll into view, filtered (after filterDelay) starts a server search.
Create option
txSelectEmptyFilter gets the search text — offer to create what was not found. txSelectFooter holds an action below the list.
Design tokens
dt changes the tokens of one select — the field and its panel.
Pass through
Your classes and styles on inner parts — static or from the select state.
Unstyled
No tectra styles, behaviour and ARIA stay. Style the parts through pt or your own CSS.