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>
  )
}

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.ReactNode`
`defaultValue`	`React.ComponentPropsWithoutRef<"select">["value"]`
`value`	`React.ComponentPropsWithoutRef<"select">["value"]`		Current value of the input
`required`	`boolean`
`isInvalid`	`boolean`
`autoFocus`	`boolean`
`disabled`	`boolean`
`inputProps`	`React.ComponentPropsWithRef<"select">`	`{}`	Props to spread onto the underlying input element
`qa`	`object`	`{}`
`onChange`	`(e: React.SyntheticEvent<HTMLSelectElement>) => void`
`size`	`\| "large"` `\| "small"` `\| "default"`	`"default"`