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 .

What's your favorite fruit?

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='border'
        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='border'
        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
`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"`