Select

Root of the select - an accessible listbox built on Base UI that owns open state and the chosen value; drive it with value/onValueChange (controlled) or defaultValue (uncontrolled).

Usage

@instruments/materia-ui/components/select

<Field className="w-72">
  <FieldLabel htmlFor="finish">Surface finish</FieldLabel>
  <FieldContent>
    <Select
      defaultValue="honed"
      items={{
        brushed: "Brushed",
        honed: "Honed",
        matte: "Matte",
        polished: "Polished",
        satin: "Satin",
      }}
    >
      <SelectTrigger id="finish">
        <SelectValue placeholder="Select a finish" />
      </SelectTrigger>
      <SelectContent>
        <SelectGroup>
          <SelectLabel>Natural</SelectLabel>
          <SelectItem value="matte">Matte</SelectItem>
          <SelectItem value="honed">Honed</SelectItem>
          <SelectItem value="brushed">Brushed</SelectItem>
        </SelectGroup>
        <SelectSeparator />
        <SelectGroup>
          <SelectLabel>Reflective</SelectLabel>
          <SelectItem value="satin">Satin</SelectItem>
          <SelectItem value="polished">Polished</SelectItem>
        </SelectGroup>
      </SelectContent>
    </Select>
    <FieldDescription>Affects lead time and price.</FieldDescription>
  </FieldContent>
</Field>

Best practices

Select is only the state root - compose SelectTrigger, SelectValue, SelectContent, and SelectItems inside it or nothing renders.
Use Select to pick one option from a short closed list; when users need type-to-filter, use Combobox instead.
Drive it with value + onValueChange (controlled) or defaultValue (uncontrolled), and give it an accessible name via the trigger (Field/Label).
Pass items (a value-to-label map or { value, label }[]) so the trigger shows the selected label even before the popup has mounted.

Props

Select

Prop	Type	Default	Description
testId	`string`

SelectContent

Prop	Type	Default	Description
className	`string`
size	`"base" \| "2xs" \| "xs" \| "sm" \| "lg" \| "xl" \| "2xl" \| "3xl"`
testId	`string`

SelectGroup

Prop	Type	Default	Description
testId	`string`

SelectItem

Prop	Type	Default	Description
className	`string`
testId	`string`

SelectLabel

Prop	Type	Default	Description
className	`string`
testId	`string`

SelectSeparator

Prop	Type	Default	Description
className	`string`
testId	`string`

SelectTrigger

Prop	Type	Default	Description
tone	`"neutral" \| "brand" \| "danger" \| null \| undefined`
radius	`"rounded" \| "square" \| "full" \| null \| undefined`
emphasis	`"link" \| "outline" \| "solid" \| "ghost" \| "soft" \| "transparent" \| null \| undefined`
pressed	`boolean \| null \| undefined`
className	`string`
size	`ResponsiveSize`	`"xl"`	Trigger size - a single token or a per-breakpoint object like `{ base: "sm", md: "xl" }`. Forwarded to the underlying Button.
testId	`string`

SelectValue

Prop	Type	Default	Description
testId	`string`

Also exports

constselectAnatomy

Anatomy

Select

select

Dropdown selection input

SelectTrigger

select-trigger

Button showing current value

SelectValue

select-value

Displayed selected value

SelectContent

select-content

Dropdown options container

SelectGroup

select-group

Grouped options

SelectLabel

select-label

Group label

SelectItem

select-item

Selectable option

SelectSeparator

select-separator

Visual divider

Composition

Builds on

Button, Center, Icon, MenuItem

Used by

DataGridPagination