Skip to content
Iryx UI

Forms

ISelect ​

A listbox driven by an items array, with keyboard navigation and typeahead. For a list long enough that typing beats scrolling, use ICombobox.

Strings as items ​

A plain string is expanded to { label: value, value }.

Groups ​

An item with its own items becomes a labelled run of options under a heading.

Sizes ​

Disabled ​

Disable the whole control, or a single option with disabled on the item — "Net 60 days" above is disabled that way.

Props ​

PropTypeDefaultDescription
items(SelectItemOption | SelectItemGroup | string)[][]Options to render
placeholderstring—Shown while nothing is selected
size'sm' | 'md' | 'lg''md'Control scale
idstring—Lands on the trigger, so a <label for> names the control
invalidboolean—Mark as failing validation. Taken from the enclosing IFormField when omitted
unstyledboolean—Drop built-in classes
classstring—Merged with the built-in classes
ui{ trigger?, content?, viewport?, item?, group?, groupLabel? }—Per-element class overrides

disabled, required, name and dir are forwarded to Reka UI's SelectRoot.

Item shapes ​

ts
interface SelectItemOption {
  label: string
  value: string
  disabled?: boolean
}

interface SelectItemGroup {
  label: string
  items: (SelectItemOption | string)[]
}

Attributes you set land on the trigger, so aria-label names the button the reader operates.