Select

Import

import { Select } from '@windmill/react-ui'

Base

The default base select doesn't need any special prop, but all attributes that you would usually use in normal HTML are available here too. Note that if you're not using a Label component (not recommended), you should use an aria-label attribute to give screen readers a label.

<Label>
  <span>Requested Limit</span>
  <Select className="mt-1">
    <option>$1,000</option>
    <option>$5,000</option>
  </Select>
</Label>

Multiple

A multi select is created including the multiple prop to the Select.

<Label>
  <span>Multiselect</span>
  <Select className="mt-1" multiple>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
    <option>Option 5</option>
  </Select>
</Label>

Disabled

The disabled prop applies disabled styles to the select.

<Select disabled>
  <option>$1,000</option>
  <option>$5,000</option>
</Select>

Valid

The valid prop applies valid styles to the select.

<Select valid>
  <option>$1,000</option>
  <option>$5,000</option>
</Select>

Invalid

Give a value of false to the valid prop to apply invalid styles to the select.

<Select valid={false}>
  <option>$1,000</option>
  <option>$5,000</option>
</Select>

Props overview

Customizing

See Customization to learn how to change defaultTheme styles.