Select

The Select component is a wrapper around the native <select> element.

Usage

You can use the Select component, with the following props:

Name
Default
Description
value
The selected value
options
An array of options to display.
state
default
The state of the select, which can be one of the following:
  • default
  • error
  • success
  • warning
placeholder
Placeholder text for the select.
size
medium
Size of the select:
  • x-small
  • small
  • medium
  • large

Example

<Select
	bind:value={user.role}
	options={roleOptions}
	placeholder="Select a role"
/>

Sizes

<FormControl>
	<Label>X-Small</Label>
	<Select size="x-small" options={roleOptions} placeholder="Select a role" />
</FormControl>
<FormControl>
	<Label>Small</Label>
	<Select size="small" options={roleOptions} placeholder="Select a role" />
</FormControl>

<FormControl>
	<Label>Medium</Label>
	<Select size="medium" options={roleOptions} placeholder="Select a role" />
</FormControl>

<FormControl>
	<Label>Large</Label>
	<Select size="large" options={roleOptions} placeholder="Select a role" />
</FormControl>