Select
---
import Select from 'fulldev-ui/components/Select.astro'
---
<Select
label="Select"
placeholder="Select an option"
options={['Option 1', 'Option 2']}
/>
Props
| Prop | Type | Default |
|---|---|---|
| color | 'base' | 'brand' | - |
| label | string | - |
| placeholder | string | - |
| options | string[] | - |
| value | string | - |
| radius | 'none' | 'auto' | 'full' | auto |
| variant | 'outline' | outline |
| as | HTMLTag | select |
| HTML Attributes | Polymorphic<select> | - |
Examples
---
import Select from 'fulldev-ui/components/Select.astro'
---
<Select
label="Select"
placeholder="Select an option"
options={['Option 1', 'Option 2']}
/>
---
import Select from 'fulldev-ui/components/Select.astro'
---
<Select size="sm" options={['Option 1', 'Option 2']} />
<Select size="md" options={['Option 1', 'Option 2']} />
<Select size="lg" options={['Option 1', 'Option 2']} />
---
import Select from 'fulldev-ui/components/Select.astro'
---
<Select color="base" options={['Option 1', 'Option 2']} />
<Select color="brand" options={['Option 1', 'Option 2']} />
---
import Select from 'fulldev-ui/components/Select.astro'
---
<Select radius="none" options={['Option 1', 'Option 2']} />
<Select radius="auto" options={['Option 1', 'Option 2']} />
<Select radius="full" options={['Option 1', 'Option 2']} />