Select

What is this?

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.

Handling state

Uncontrolled

Uncontrolled

Select…Option 1Option 2Option 3

Controlled

Controlled

Select…Option 1Option 2Option 3

Optional

Label (optional)

Select…Option 1Option 2Option 3

Help text

Label

Select…Option 1Option 2Option 3

Help text

Error

With error

Select…Option 1Option 2Option 3

Error text

Disabled

Disabled

Select…Option 1Option 2Option 3

Usage

import { useState } from 'react'
import { Select } from '@vtex/admin-ui'

function Example() {
  const [value, setValue] = useState()

  return (
    <Select
      label="Label"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    >
      <option>Option 1</option>
      <option>Option 2</option>
      <option>...</option>
    </Select>
  )
}

Select Props

Name	Type	Description	Required	Default
label	string	Label text	✅	-
helpText	ReactNode	Help text	🚫	-
error	boolean	Has an error	🚫	-
errorText	ReactNode	Error text	🚫	-
optional	boolean	Optional input	🚫	-

Best Practices

Mind the order of the options, like putting the more probable one to be selected at the top. In doubt, sort them alphanumerically (from A to Z and from 0 to 9).
If there are less than four options listed, consider using a radio button.
Don't offer overlapping options, they should be clearly mutually exclusive.

• What is this?
• Handling state
  • Uncontrolled
  • Controlled
• Optional
• Help text
• Error
• Disabled