Select

Vertical option lists with keyboard navigation.

Select

Select provides a scrollable list of options. Users can navigate with arrow keys and choose an option. The selectedIndex and onSelect props control selection.

<select
  options={["TypeScript", "Rust", "Zig"]}
  selectedIndex={0}
  onSelect={(index) => setLanguage(index)}
/>

Populate options from an array of strings or objects. You can also disable items by providing a boolean flag.

<select
  options={[
    { label: "Small", disabled: true },
    { label: "Medium" },
    { label: "Large" },
  ]}
  selectedIndex={1}
  onSelect={(i) => setSize(i)}
/>

For large option sets, pair Select with Input: let users filter the list with a query and keep selectedIndex stable as results change.

Props

Prop	Type	Notes
`options`	`array`	List of options (strings or objects). Provide stable values/labels for predictable UX.
`selectedIndex`	`number`	Controlled selection index. Keep it stable when filtering.
`focused`	`boolean`	Requests focus on mount (React/Solid).
`onChange`	`(index, option) => void`	Fires when highlight changes (useful for preview panes).
`onSelect`	`(index, option) => void`	Fires on confirmation (Enter/click).
`showScrollIndicator`	`boolean`	Show “more above/below” indicator for long lists.

Recipes

Recipe: master/detail browser (Select + preview panel). Use onChange to preview and onSelect to confirm.

<box flexDirection="row" height="100%">
  <box width={26} border padding={1}>
    <text content="Items" bold />
    <select
      focused
      options={items()}
      selectedIndex={active()}
      onChange={(i) => setActive(i)}
      onSelect={(i) => open(items()[i])}
      showScrollIndicator
    />
  </box>
  <box flexGrow={1} border padding={1} marginLeft={1}>
    <text content={previewFor(items()[active()])} />
  </box>
</box>