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.
Optional
Loading...
Help text
Loading...
Error
Loading...
Disabled
Loading...
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.