Select is a light wrapper around the HTML select element

It adds default styling and the css prop.

A Select needs to be associated with a label for accessibility purposes, so rather than using the Select component directly in a UI, consider using a SelectField, which provides a Label and displays validation errors. Use this Select to compose more complex Field type components.

<Select css={{ width: 300 }}>
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
</Select>

Accessibility

For accessibility purposes the component needs to have the id prop set, to link it to the label it is associated with. If a label is not available, please add an aria-label to ensure that the component remains accessible

Placeholder

The component can display a placeholder without a value by passing the placeholder property.

<Select placeholder="Please select a fruit" css={{ width: 300 }}>
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
</Select>

Disabled select

The component has a disabled state, by setting the disabled property.

<Select disabled placeholder="Please select a fruit" css={{ width: 300 }}>
<option value="apples">Apples</option>
<option value="bananas">Bananas</option>
</Select>

Disabled Option

The component can show an option as disabled, by setting the disabled property on the option.

<Select placeholder="Please select a fruit" css={{ width: 300 }}>
<option value="apples">Apples</option>
<option value="bananas" disabled>
Bananas
</option>
</Select>

API Reference

PropTypeDefaultRequired
size
"sm" | "md"
md

-

state
"error"

-

-

cssCSSProperties

-

-

asJSX.IntrinsicElements

-

-

placeholder
string

-

-