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

NameTypeDefaultDescriptionRequired?
idstring
ID of the form element, should match the "for" value of the associated label
namestring
ariaLabelstring
Label used to describe the select if not used with an accompanying visual label
ariaDescribedbystring
Attribute used to associate other elements that describe the Select, like an error
childrenReact.Node
defaultValueany
valueany
Current value of the input
requiredboolean
isInvalidboolean
autoFocusboolean
disabledboolean
inputPropsany
Props to spread onto the underlying input element
qaany
onChange(e: SyntheticInputEvent<HTMLInputElement>) => void
size
'large'
'small'
'default'
'default'