TkxSelect

Single select with grouping

Country

import { TkxSelect } from 'tekivex-ui';

const options = [
  { value: 'us', label: 'United States' },
  { value: 'in', label: 'India' },
  { value: 'jp', label: 'Japan' },
];

<TkxSelect
  label="Country"
  options={options}
  onChange={(value) => console.log(value)}
/>

Searchable

Searchable

Country (search)

<TkxSelect
  label="Country"
  options={options}
  searchable
/>

The search input filters options by label. placeholder and the search input’s aria-label come from the active locale.

Multiple selection

Multi-select with clearable

Travel destinations

Select...

const [values, setValues] = useState<string[]>([]);

<TkxSelect
  label="Tags"
  options={tagOptions}
  multiple
  clearable
  value={values}
  onChange={setValues}
/>

Selected tags render as chips inside the field. clearable adds a clear button with a localised aria-label.

Grouped options

const options = [
  { value: 'us', label: 'United States', group: 'Americas' },
  { value: 'br', label: 'Brazil',        group: 'Americas' },
  { value: 'in', label: 'India',         group: 'Asia' },
  { value: 'jp', label: 'Japan',         group: 'Asia' },
];

Group headers render as non-interactive list items.

Virtualised list

For very long option lists (5000+), enable virtual scroll:

<TkxSelect
  options={hugeList}
  virtualScroll
  optionHeight={36}
  maxMenuHeight={280}
/>

Accessibility

• ARIA combobox + listbox pattern (WAI-ARIA 1.2)
• Keyboard: arrows navigate, Enter selects, Escape closes, Home / End jump to first / last option, type-ahead jump
• Active descendant tracked via aria-activedescendant
• Selected state via aria-selected
• Disabled options skipped during keyboard navigation

Props

Prop	Type	Required	Description
options	SelectOption[]	yes	{ value, label, group?, disabled?, icon?, description? }.
value	string | string[]		Controlled value.
defaultValue	string | string[]		Uncontrolled initial value.
placeholder	string		Localised by default.
multiple	boolean		Multi-select mode.
searchable	boolean		Enable filter input.
clearable	boolean		Show clear button.
isLoading	boolean		Show loading state in menu.
renderOption	(opt) => ReactNode		Custom option row.
virtualScroll	boolean		For long lists.

Source

src/components/TkxSelect.tsx