Select

Components

Select

Select enables a user to select a single item from a list of options.

Always use a Label component to identify and describe the purpose of a select element.

What's your favorite fruit?

import { Select } from '@sproutsocial/racine'

<Box>
  <Label htmlFor='fruit'>
    What's your favorite fruit?
  </Label>

  <Select id='fruit'>
    <option value='apple'>Apple</option>
    <option value='orange'>Orange</option>
    <option value='banana'>Banana</option>
  </Select>
</Box>

<Box>
  <Label htmlFor='fruit'>
    What's your favorite fruit?
  </Label>
  <Select id='fruit'>
    <option value='apple'>Apple</option>
    <option value='orange'>Orange</option>
    <option value='banana'>Banana</option>
  </Select>
</Box>

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

COMMON

Learn more

Name	Type	Default	Description
`id`	`string`		ID of the form element, should match the "for" value of the associated label
`name`	`string`		name of the form element
`ariaLabel`	`string`		Label used to describe the select if not used with an accompanying label
`children`	`ReactNode`
`defaultValue`	`any`
`value`	`any`		Current value of the select
`required`	`boolean`		Sets the HTML required attribute
`isInvalid`	`boolean`
`autoFocus`	`boolean`
`disabled`	`boolean`
`inputProps`	`any`		props to spread onto the select field
`qa`	`any`		legacy for qa props until we cut everyone over
`onChange`	`signature`
`size`	`"large""small""default"`	`"default"`