Select

Components

Select

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

Always use a component to identify and describe the purpose of a select element. Selects are often used within a .

Pro tip

If you need to customize the styles of the select menu or offer multiple selections, you should use the component instead.

import { Select } from '@sproutsocial/racine'

() => {
  const [selection, setSelection] = useState(null)
  const updateSelection = (e) => setSelection(e.target.value)

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

      <Select id="fruit" defaultValue="" onChange={updateSelection}>
        <option value="">Select an option...</option>
        <option value="apple">Apple</option>
        <option value="orange">Orange</option>
        <option value="banana">Banana</option>
        <option value="kiwi">Kiwi</option>
      </Select>

      {selection && (
        <Box
          p={400}
          mt={400}
          border={500}
          borderColor="container.border.base"
          borderRadius="outer"
        >
          <Text fontSize={200}>Your selection: {selection}</Text>
        </Box>
      )}
    </Box>
  )
}

() => {
  const [selection, setSelection] = useState(null)
  const updateSelection = (e) => setSelection(e.target.value)

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

      <Select id="fruit" defaultValue="" onChange={updateSelection}>
        <option value="">Select an option...</option>
        <option value="apple">Apple</option>
        <option value="orange">Orange</option>
        <option value="banana">Banana</option>
        <option value="kiwi">Kiwi</option>
      </Select>

      {selection && (
        <Box
          p={400}
          mt={400}
          border={500}
          borderColor="container.border.base"
          borderRadius="outer"
        >
          <Text fontSize={200}>Your selection: {selection}</Text>
        </Box>
      )}
    </Box>
  )
}

Properties

Name	Type	Default	Description
`id`	`string`		ID of the form element, should match the "for" value of the associated label
`name`	`string`
`ariaLabel`	`string`		Label used to describe the select if not used with an accompanying visual label
`ariaDescribedby`	`string`		Attribute used to associate other elements that describe the Select, like an error
`children`	`React.Node`
`defaultValue`	`any`
`value`	`any`		Current value of the input
`required`	`boolean`
`isInvalid`	`boolean`
`autoFocus`	`boolean`
`disabled`	`boolean`
`inputProps`	`any`		Props to spread onto the underlying input element
`qa`	`any`
`onChange`	`(e: SyntheticInputEvent<HTMLInputElement>) => void`
`size`	`"large"` `"small"` `"default"`	`"default"`