Select

Implementation#

import { Select } from "slipstream-ui";

const Example = () => <Select>...</Select>;

Default#

Example

Validation#

Example

<Select size="sm">...</Select>
<Select size="md">...</Select>
<Select size="lg">...</Select>

Sizing#

Example

<Select size="sm">...</Select>
<Select size="md">...</Select>
<Select size="lg">...</Select>

Rounded#

Example

<Select rounded>...</Select>

Option Group#

Option Groups are a great way to group options into their respective sections. Technically, the optiongroup and option elements cannot be styled per browser spec. As a result, using the SelectOptionGroup and SelectOption components are optional and preferential.

Example

import { Select, SelectOptionGroup, SelectOption } from "slipstream-ui";

<Select>
  <SelectOptionGroup label="">
    <SelectOption>...</SelectOption>
    <SelectOption>...</SelectOption>
    <SelectOption>...</SelectOption>
  </SelectOptionGroup>
</Select>;

Right-To-Left (rtl)#

Example

<Select rtl>...</Select>

Props#

Select#

Attribute	Type	Value	Default Value	Description
size	string	sm/md/lg	md	Set size of text and select element
success	boolean	true/false	undefined	Green border surrounding select element
invalid	boolean	true/false	undefined	Red border surrounding input element
disabled	boolean	true/false	undefined	Disabled select element both in UI and functionality
rounded	boolean	true/false		Rounded out corners of input to become more circular in presentation
rtl	boolean	true/false		When true, sets element to direction of right-to-left (rtl)

SelectOption#

Attribute	Type	Value	Default Value	Description
value	string			Html option element built-in value attribute

SelectOptionGroup#

Attribute	Type	Value	Default Value	Description
label	string			Html option group element built-in label attribute