Select

Import

import { Select } from '@narimanb/wreactui'

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.

Code

<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.

Code

<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.

Valid

The valid prop applies valid styles to the select.

Code

<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.

Code

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

Props overview

Prop	Description	Type	Default
disabled	apply disabled styles to the select	boolean
valid	apply valid or invalid styles to the select	boolean
multiple	create a multi option select	boolean