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. Selects are often used within a Form Field.

info

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

Live Editor

function SelectExample() {
  const [selection, setSelection] = React.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	Required?
id	string		ID of the form element, should match the "for" value of the associated label	Yes
name	string			Yes
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			Yes
defaultValue	string | number | readonly string[]
value	string | number | readonly string[]		Current value of the input
required	boolean
isInvalid	boolean
autoFocus	boolean
disabled	boolean
inputProps	Omit<DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>, "ref"> & { ...; }	{}	Props to spread onto the underlying input element
qa	object	{}
onChange	(e: SyntheticEvent<HTMLSelectElement, Event>) => void
size	| "small" | "large" | "default"	"default"

Properties

The Select component supports the following system props:

• COMMON - Common styling props

info

Full property documentation will be added soon.