Select

Displays a list of options for the user to pick from

Edit the select component kitchen sink code

<Select name="Select kitchen sink example" placeholder="Select an instrument">
  <SelectGroup>
    <SelectLabel text="Strings" />
    <SelectItem text="Violin" value="violin" />
    <SelectItem text="Cello" value="cello" />
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectLabel text="Woodwinds" />
    <SelectItem text="Clarinet" value="clarinet" />
    <SelectItem text="Oboe" value="oboe" />
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectLabel text="Brass" />
    <SelectItem text="Trumpet" value="trumpet" />
    <SelectItem text="Trombone" value="trombone" />
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectLabel text="Percussion" />
    <SelectItem text="Piano" value="piano" />
    <SelectItem text="Triangle" value="triangle" />
  </SelectGroup>
</Select>

Props
Link to this heading

The <Select /> component inherits the props of the Radix UI Select.Root Primitive, which are not listed below.

<Select>


import { Select } from '@strum/react';

name	type	default
disabled	boolean	false
error	string	-
name	string	-
onChange	(value: string) => void	-
placeholder	string	-
ref	Ref<HTMLButtonElement>	-
value	string	-

Items
Link to this heading

Add <SelectItem /> components as children of the select. Items require a text string and value string, and can take an optional disabled boolean.

Edit the select menu item code

<Select name="Select menu items example" placeholder="Select an instrument">
  <SelectItem text="Violin" value="violin" />
  <SelectItem text="Cello" value="cello" />
  <SelectItem text="Clarinet" value="clarinet" />
  <SelectItem text="Oboe" value="oboe" />
  <SelectItem disabled text="Trumpet" value="trumpet" />
  <SelectItem text="Trombone" value="trombone" />
  <SelectItem text="Piano" value="piano" />
  <SelectItem text="Triangle" value="triangle" />
</Select>

Groups and labels
Link to this heading

Organize logical sections of your select options withing a <SelectGroup />. Used in conjunction with a <SelectLabel />, grouping will ensure good accessibility standards. Include a <SelectSeparator /> between groups to add visual separation.

Edit the select menu grouping and labels code

<Select name="Select grouping example" placeholder="Select an instrument">
  <SelectGroup>
    <SelectItem text="Violin" value="violin" />
    <SelectItem text="Cello" value="cello" />
  </SelectGroup>
  <SelectSeparator />
  <SelectGroup>
    <SelectItem text="Clarinet" value="clarinet" />
    <SelectItem text="Oboe" value="oboe" />
  </SelectGroup>
</Select>

Disabled state
Link to this heading

Edit the disabled select input code

<Select
  disabled
  name="Disabled select example"
  placeholder="Select an instrument"
>
  <SelectItem text="Violin" value="violin" />
  <SelectItem text="Cello" value="cello" />
</Select>

Error state
Link to this heading

Edit the select input error code

<Select
  error="Instrument is required"
  name="Error state example"
  placeholder="Select an instrument"
>
  <SelectItem text="Violin" value="violin" />
  <SelectItem text="Cello" value="cello" />
</Select>

Controlled input
Link to this heading

To control your select component with React, simply include a value string prop and a onChange function prop.

Edit the controlled select input code

<Select
  name="Select controlled input example"
  placeholder="Select an instrument"
  value={selectedInstrument}
  onChange={changeInstrument}
>
  <SelectItem text="Violin" value="violin" />
  <SelectItem text="Cello" value="cello" />
</Select>

Edit on GitHub

Select

PropsLink to this heading

<Select>

ItemsLink to this heading

Groups and labelsLink to this heading

Disabled stateLink to this heading

Error stateLink to this heading

Controlled inputLink to this heading