Select

Pick one option from a list in a popover (React Aria Select), with typeahead.

Import

import { Select, SelectItem } from '@marbleui/ui'

Props

<Select>

Prop	Type	Default
children *required	`ReactNode`	`—`
description	`ReactNode`	`—`
errorMessage	`string \| ((validation: ValidationResult) => string)`	`—`
items	`Iterable<T>`	`—`
label	`ReactNode`	`—`
variant	`FieldVariant`	`—`

Also accepts React Aria props (108).

<SelectItem>

No props of its own.

Also accepts React Aria props (101).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Select · React Aria SelectValue. Follow the primitive's docs for the full keyboard map.

Usage notes

Pick one option from a short, known list. For long lists or free text use ComboBox; for 2–5 always-visible options use RadioGroup or SegmentedControl.

<Select label="Team" defaultSelectedKey="design">
  <SelectItem id="design">Design</SelectItem>
  <SelectItem id="eng">Engineering</SelectItem>
</Select>

Controlled: selectedKey + onSelectionChange. Keys are the items’ ids.
Typeahead works on the trigger: typing a letter jumps to matching items without opening.
Without a visible label, pass aria-label.

Example source · show

import { Select, SelectItem } from './select'

const roles = [
  { id: 'owner', name: 'Owner' },
  { id: 'admin', name: 'Admin' },
  { id: 'member', name: 'Member' },
  { id: 'guest', name: 'Guest' },
]

const Dot = ({ className }: { className: string }) => <span className={`size-2 rounded-full ${className}`} />

export const styles = {
  Outline: () => (
    <Select className="w-64" label="Role" placeholder="Choose a role" items={roles} defaultSelectedKey="member">
      {(r) => <SelectItem id={r.id}>{r.name}</SelectItem>}
    </Select>
  ),
  Filled: () => (
    <Select className="w-64" variant="filled" label="Status" defaultSelectedKey="active" description="Visible to your team.">
      <SelectItem id="active" textValue="Active"><Dot className="bg-success" /> Active</SelectItem>
      <SelectItem id="away" textValue="Away"><Dot className="bg-warning" /> Away</SelectItem>
      <SelectItem id="dnd" textValue="Do not disturb"><Dot className="bg-danger" /> Do not disturb</SelectItem>
    </Select>
  ),
}

Source: packages/ui/src/select/select.tsx

Catalog

Category: selection
Priority: Foundation
Primitive: react-aria
React Aria: Select
Base UI: Select