This library is still in development and is available only for internal usage at VTEX.
Skip to main content

Select

Version: 0.131.0

Select

Select is a component that allows users to select an option from a list. It requires a click to see the options and supports only single-selection.

Examples​

Tone of voice​

The Select tone of voice is either neutral (default) or critical, and is adjustable using the tone prop.

function Example() {
  const [value, setValue] = React.useState('today')

  return (
    <Stack direction="row" space="$l">
      <Select
        label="Neutral"
        helperText="Helpful text"
        criticalText="Critical message"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      >
        <option value="yesterday">Yesterday</option>
        <option value="today">Today</option>
        <option value="tomorrow">Tomorrow</option>
      </Select>
      <Select
        tone="critical"
        label="Critical"
        criticalText="Critical message"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      >
        <option value="yesterday">Yesterday</option>
        <option value="today">Today</option>
        <option value="tomorrow">Tomorrow</option>
      </Select>
    </Stack>
  )
}

Disabled​

It means that the user will not be able to select any value from the Select. To use this variation, the disabled property should have a true value.

function Example() {
  const [value, setValue] = React.useState('today')

  return (
    <Select
      label="Disabled"
      helperText="Helpful text"
      criticalText="Critical message"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      disabled
    >
      <option value="yesterday">Yesterday</option>
      <option value="today">Today</option>
      <option value="tomorrow">Tomorrow</option>
    </Select>
  )
}