Select

Props

• appearance
  "ghost" | "default" | "header"

  A filled field (default), a quiet one for toolbars (ghost), or a quiet one in full text colour for column headers (header).

• aria-label
  string

  The accessible name, for when there is no visible label.

• defaultValue
  string | string[] | null

  The value on first render, when the component keeps its own value.

• description
  ReactNode

  One sentence of help under the label.

• disabled
  boolean

  Turns it off: it can't be used, and it looks dimmed.

• fullWidth
  boolean

  Width of the trigger follows its content (default) or fills the container.

• icon
  IconSvgElement

  Leading icon in the trigger.

• id
  string

  The id of the control, so a label elsewhere can point to it.

• invalid
  boolean

  Shows it as invalid; pair it with a message that says what to fix.

• label
  ReactNode

  The visible label.

• layout
  "horizontal" | "vertical"

  The label above the control (vertical) or beside it (horizontal).

• multiple
  boolean

  Allows choosing more than one option; value is then a list.

• name
  string

  The field name the value is sent under in a form.

• onOpenChange
  ((open: boolean) => void)

  Called when the list opens or closes.

• onValueChange
  ((value: string) => void) | ((value: string[]) => void)

  Called with the chosen value, or the list of values with multiple.

• open
  boolean

  Whether the list is open, when you control it.

• optional
  boolean

  Adds “Optional” to the label, for forms where most fields are required.

• options
  SelectOption[]

  The options to choose from.

• placeholder
  ReactNode

  Defaults to "Select" in the provider's language.

• required
  boolean

  Marks it as required in a form.

• size
  "md" | "sm" | "lg" | "xl"

  The height of the field.

• value
  string | string[] | null

  The chosen value, or a list of values with multiple, when you control it.