Skip to content

Select

A native, styled select element with options to pick from.
--- 
import { Select } from 'fulldev-ui'
---

<Select
  color="base"
  size="md"
  label={"Label"}
  placeholder={"Placeholder"}
  contrast={false}
  options={["Option 1","Option 2"]}
/>

Props

Prop Type Default
color base | brand -
size sm | md | lg -
label string -
placeholder string -
contrast boolean -
as HTMLTag div
options string[] -
HTML Attributes Polymorphic<as> -

Examples

options

---
import { Select } from 'fulldev-ui'
---
<Select
options={[
{
text: 'Option 1',
value: 'value 1',
},
'Option 2',
]}
/>

size

The size prop cascades: it is inherited from the parent and it is applied to all children.

---
import { Select } from 'fulldev-ui'
---
<Select size="sm" options={['Option 1', 'Option 2']} />
<Select size="md" options={['Option 1', 'Option 2']} />
<Select size="lg" options={['Option 1', 'Option 2']} />

../../../../../ui/src