<.select_root id="docs-select-hero" value="apple">
<.select_trigger />
<.select_content>
<.select_group>
<.select_label>Fruits</.select_label>
<.select_item value="orange">Orange</.select_item>
<.select_item value="apple">Apple</.select_item>
<.select_item value="grape" disabled>Grape</.select_item>
</.select_group>
<.select_separator />
<.select_group>
<.select_label>Vegetables</.select_label>
<.select_item value="carrot">Carrot</.select_item>
<.select_item value="potato">Potato</.select_item>
</.select_group>
</.select_content>
</.select_root>API Reference
Root
Contains all the parts of a select. It inherits props from the Select primitive Root part. Use a controlled value (LiveView has no default_value).
| Prop | Type | Default | Description |
|---|---|---|---|
dir
|
string
|
"ltr"
|
|
disabled
|
boolean
|
false
|
|
id
|
string
|
—
|
|
name
|
string
|
nil
|
|
on_change
|
string
|
nil
|
|
required
|
boolean
|
false
|
|
value
|
string
|
nil
|
dir
Type
string
Default
"ltr"
disabled
Type
boolean
Default
false
id
Type
string
Default
—
name
Type
string
Default
nil
on_change
Type
string
Default
nil
required
Type
boolean
Default
false
value
Type
string
Default
nil
Trigger
The button that toggles the select. Supports common margin props via shared styling on the trigger surface.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
color
|
string
|
—
|
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. |
placeholder
|
string
|
nil
|
|
size
|
string
|
"2"
|
|
value
|
string
|
nil
|
Initial value for SSR |
variant
|
string
|
"surface"
|
class
Type
string
Default
nil
color
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type
string
Default
—
placeholder
Type
string
Default
nil
size
Type
string
Default
"2"
value
Initial value for SSR
Type
string
Default
nil
variant
Type
string
Default
"surface"
Content
The component that pops out when the select is open.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
color
|
string
|
—
|
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. |
high_contrast
|
boolean
|
—
|
Whether to increase color contrast with the background. |
position
|
string
|
"item-aligned"
|
|
size
|
string
|
"2"
|
|
variant
|
string
|
"solid"
|
class
Type
string
Default
nil
color
Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky.
Type
string
Default
—
high_contrast
Whether to increase color contrast with the background.
Type
boolean
Default
—
position
Type
string
Default
"item-aligned"
size
Type
string
Default
"2"
variant
Type
string
Default
"solid"
Item
The component that contains the select items.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
|
disabled
|
boolean
|
false
|
|
value
|
string
|
—
|
class
Type
string
Default
nil
disabled
Type
boolean
Default
false
value
Type
string
Default
—
Group
Used to group multiple items. Use in conjunction with select_label for accessibility labelling.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
class
Type
string
Default
nil
Label
Used to render the label of a group; it isn't focusable using arrow keys.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
class
Type
string
Default
nil
Separator
Used to visually separate items in the Select.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
class
Type
string
Default
nil
Examples
Size
Use the size prop on select_trigger and select_content to control the size.
<.flex gap="3" align="center" wrap="wrap">
<.select_root id="docs-select-size-1" value="apple">
<.select_trigger size="1" />
<.select_content size="1">
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
<.select_root id="docs-select-size-2" value="apple">
<.select_trigger size="2" />
<.select_content size="2">
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
<.select_root id="docs-select-size-3" value="apple">
<.select_trigger size="3" />
<.select_content size="3">
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
</.flex>Variant
Use the variant prop on select_trigger to customize the visual style.
<.flex gap="3" align="center" wrap="wrap">
<.select_root id="docs-select-variant-surface" value="apple">
<.select_trigger variant="surface" />
<.select_content>
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
<.select_root id="docs-select-variant-classic" value="apple">
<.select_trigger variant="classic" />
<.select_content>
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
<.select_root id="docs-select-variant-soft" value="apple">
<.select_trigger variant="soft" />
<.select_content>
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
</.flex>Ghost
Use the ghost trigger variant to render the trigger without a visually containing element. Ghost triggers behave differently in layout as they use a negative margin to optically align themselves against their siblings while maintaining their padded active and hover states.
<.flex gap="3" align="center" wrap="wrap">
<.select_root id="docs-select-ghost-surface" value="apple">
<.select_trigger variant="surface" />
<.select_content>
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
<.select_root id="docs-select-ghost" value="apple">
<.select_trigger variant="ghost" />
<.select_content>
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
</.flex>Color
Use the color prop on select_trigger and select_content to assign a specific color value.
<.flex gap="3" wrap="wrap">
<.select_root id="docs-select-color-indigo" value="apple">
<.select_trigger color="indigo" variant="soft" />
<.select_content color="indigo">
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
<.select_root id="docs-select-color-cyan" value="apple">
<.select_trigger color="cyan" variant="soft" />
<.select_content color="cyan">
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
<.select_root id="docs-select-color-orange" value="apple">
<.select_trigger color="orange" variant="soft" />
<.select_content color="orange">
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
<.select_root id="docs-select-color-crimson" value="apple">
<.select_trigger color="crimson" variant="soft" />
<.select_content color="crimson">
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
</.flex>High-contrast
Use the high_contrast prop on select_content to increase item contrast.
<.flex gap="3" wrap="wrap">
<.select_root id="docs-select-hc-off" value="apple">
<.select_trigger color="gray" />
<.select_content color="gray" variant="solid">
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
<.select_root id="docs-select-hc-on" value="apple">
<.select_trigger color="gray" />
<.select_content color="gray" variant="solid" high_contrast>
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>
</.flex>Placeholder
Use the placeholder prop to create a trigger that doesn't need an initial value.
<.select_root id="docs-select-placeholder">
<.select_trigger placeholder="Pick a fruit" />
<.select_content>
<.select_group>
<.select_label>Fruits</.select_label>
<.select_item value="orange">Orange</.select_item>
<.select_item value="apple">Apple</.select_item>
<.select_item value="grape" disabled>Grape</.select_item>
</.select_group>
<.select_separator />
<.select_group>
<.select_label>Vegetables</.select_label>
<.select_item value="carrot">Carrot</.select_item>
<.select_item value="potato">Potato</.select_item>
</.select_group>
</.select_content>
</.select_root>Position
Set position="popper" on content to position the select menu below the trigger.
<.select_root id="docs-select-popper" value="apple">
<.select_trigger />
<.select_content position="popper">
<.select_item value="apple">Apple</.select_item>
<.select_item value="orange">Orange</.select_item>
</.select_content>
</.select_root>