Skip to content

Select

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


---
import { Select, SelectOption } from 'fulldev-ui'
---
<Select>
<SelectOption>Option 1</SelectOption>
<SelectOption>Option 2</SelectOption>
</Select>

Props

options

Type: (SelectOption | string)[]

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

option.text

Type: text?: string

Useful when getting content from Astro content collections or a headless CMS.

option HTMLAttributes

All HTML <option> attributes are accepted as props too.

size

Type: size?: 'sm' | 'md' | 'lg'

Sets the size for this component and all its 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']} />

density

Type: density?: 'base' | 'compact' | string

Changes the underlying values used by the size prop, for this component and all its children.

For example, we set compact on a card and can now size this and all children automatically based on the size on the wrapping block/section.

Choose a predefined density, or a custom value defined like explained in the theming guide.

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

theme

Type: theme?: 'light' | 'dark' | string

Changes the colors for this component and all its children.

Choose a predefined theme, or a custom value defined like explained in the theming guide.

HTML Attributes

All regular HTML attributes for the select element are accepted as props too.