Select

A native, styled select element with options to pick from.

Label Placeholder Option 1 Option 2

color base brand

size sm md lg

contrast

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

Option 2

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

Option 1 Option 2

Option 1 Option 2

Option 1 Option 2

---
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']} />