Select

Displays a list of options for the user to pick from

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
-

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

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.

Disabled state
Link to this heading

Controlled input
Link to this heading

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