← All components Form primitives

Select

Listbox pop-up button (Apple HIG). Typeahead by first letter; arrow keys navigate; Esc closes.

Inspired by Radix Select (listbox pattern), Apple HIG Pop-up buttons.

Preview

What it looks like.

Native-feeling select: ⏎ / Space opens, arrow keys navigate, type a letter to jump to the first match.

Model

Runtime

Quantization

Live — the real component, scoped to this frame.

Usage

Drop it into your app.

import { Select } from '@locara/components'

<Select
  value={modelId}
  onValueChange={setModelId}
  options={[
    { value: 'qwen-7b', label: 'Qwen 2.5 7B', hint: '4.9 GB' },
    { value: 'llama-8b', label: 'Llama 3 8B', hint: '4.9 GB' },
    { value: 'llama-70b', label: 'Llama 3 70B', hint: '42.8 GB' },
    { value: 'llama-405b', label: 'Llama 3.1 405B', hint: 'needs 256+ GB', disabled: true },
  ]}
/>

Or copy the source into your repo: locara add select

Design notes

Why it works this way.

Use Select for ≤20 options. For larger lists, async loading, or fuzzy search, use Combobox instead. Typeahead by first letter is supported in the keyboard model.