Select

One of several, collapsed into a row until opened.

import { Select } from '@textui/core';

<Select
  label="Region"
  options={[
    { value: 'eu-west-1', label: 'eu-west-1' },
    { value: 'us-east-1', label: 'us-east-1' },
  ]}
  value="eu-west-1"
  onChange={(value) => console.log(value)}
/>

Props

| Prop | Type | Default | | | — | — | — | — | | options | SelectOption[] | required | | | value | string | | | | onChange | (value: string) => void | | | | label | string | | | | placeholder | string | | | | open | boolean | | Show the list inline instead of collapsing to one line. | | visibleRows | number | 6 | Rows shown at once when open. |

Plus everything on BoxProps.

Role: combobox.

Closed it is one row; open it is a panel on the floating layer, so it draws over what is beneath it instead of pushing the form down.

open makes that controlled, for a screen that wants to open the list from a command. visibleRows caps the panel and the rest scrolls.

See also

• RadioGroup - when there are few enough to show at once
• CommandPalette - searching commands rather than choosing a value