Wraps the ToggleGroup primitive (type="single", non-deselectable) with Themes styling — the same pattern as Radix Themes.
<.segmented_control id="segmented-control-hero" default_value="inbox">
<:option value="inbox">Inbox</:option>
<:option value="drafts">Drafts</:option>
<:option value="sent">Sent</:option>
</.segmented_control>API Reference
This component supports common margin props.
Root
Contains the items of the control. Prefer the convenience segmented_control with <:option> slots, or compose segmented_control_root / segmented_control_item directly.
| Prop | Type | Default | Description |
|---|---|---|---|
bottom
|
string
|
—
|
CSS bottom property. Accepts scale values, CSS strings, responsive. |
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. |
default_value
|
string
|
nil
|
|
disabled
|
boolean
|
false
|
|
flex_basis
|
string
|
—
|
CSS flex-basis property. Responsive supported. |
flex_grow
|
string
|
—
|
CSS flex-grow property. Responsive supported. |
flex_shrink
|
string
|
—
|
CSS flex-shrink property. Responsive supported. |
grid_area
|
string
|
—
|
CSS grid-area property. Responsive supported. |
grid_column
|
string
|
—
|
CSS grid-column property. Responsive supported. |
grid_column_end
|
string
|
—
|
CSS grid-column-end property. Responsive supported. |
grid_column_start
|
string
|
—
|
CSS grid-column-start property. Responsive supported. |
grid_row
|
string
|
—
|
CSS grid-row property. Responsive supported. |
grid_row_end
|
string
|
—
|
CSS grid-row-end property. Responsive supported. |
grid_row_start
|
string
|
—
|
CSS grid-row-start property. Responsive supported. |
height
|
any
|
—
|
Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
high_contrast
|
boolean
|
—
|
Whether to increase color contrast with the background. |
id
|
string
|
nil
|
|
inset
|
string
|
—
|
CSS inset property. Accepts scale values, CSS strings, responsive. |
left
|
string
|
—
|
CSS left property. Accepts scale values, CSS strings, responsive. |
max_height
|
any
|
—
|
Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
max_width
|
any
|
—
|
Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
min_height
|
any
|
—
|
Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
min_width
|
any
|
—
|
Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
on_change
|
string
|
nil
|
|
overflow
|
string
|
—
|
CSS overflow property. Responsive supported. |
overflow_x
|
string
|
—
|
CSS overflow-x property. Responsive supported. |
overflow_y
|
string
|
—
|
CSS overflow-y property. Responsive supported. |
p
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pb
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pl
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
position
|
string
|
—
|
CSS position property. Responsive supported. |
pr
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
pt
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
px
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
py
|
any
|
—
|
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
radius
|
string
|
—
|
Border radius utility. Accepts: none, small, medium, large, full. Responsive supported. |
right
|
string
|
—
|
CSS right property. Accepts scale values, CSS strings, responsive. |
size
|
string
|
"2"
|
|
style
|
string
|
""
|
|
top
|
string
|
—
|
CSS top property. Accepts scale values, CSS strings, responsive. |
value
|
string
|
nil
|
|
variant
|
string
|
"surface"
|
|
width
|
any
|
—
|
Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}` |
bottom
CSS bottom property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
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
—
default_value
Type
string
Default
nil
disabled
Type
boolean
Default
false
flex_basis
CSS flex-basis property. Responsive supported.
Type
string
Default
—
flex_grow
CSS flex-grow property. Responsive supported.
Type
string
Default
—
flex_shrink
CSS flex-shrink property. Responsive supported.
Type
string
Default
—
grid_area
CSS grid-area property. Responsive supported.
Type
string
Default
—
grid_column
CSS grid-column property. Responsive supported.
Type
string
Default
—
grid_column_end
CSS grid-column-end property. Responsive supported.
Type
string
Default
—
grid_column_start
CSS grid-column-start property. Responsive supported.
Type
string
Default
—
grid_row
CSS grid-row property. Responsive supported.
Type
string
Default
—
grid_row_end
CSS grid-row-end property. Responsive supported.
Type
string
Default
—
grid_row_start
CSS grid-row-start property. Responsive supported.
Type
string
Default
—
height
Height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
high_contrast
Whether to increase color contrast with the background.
Type
boolean
Default
—
id
Type
string
Default
nil
inset
CSS inset property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
left
CSS left property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
max_height
Max height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
max_width
Max width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
min_height
Min height utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
min_width
Min width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
on_change
Type
string
Default
nil
overflow
CSS overflow property. Responsive supported.
Type
string
Default
—
overflow_x
CSS overflow-x property. Responsive supported.
Type
string
Default
—
overflow_y
CSS overflow-y property. Responsive supported.
Type
string
Default
—
p
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pb
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pl
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
position
CSS position property. Responsive supported.
Type
string
Default
—
pr
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
pt
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
px
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
py
Padding utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
radius
Border radius utility. Accepts: none, small, medium, large, full. Responsive supported.
Type
string
Default
—
right
CSS right property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
size
Type
string
Default
"2"
style
Type
string
Default
""
top
CSS top property. Accepts scale values, CSS strings, responsive.
Type
string
Default
—
value
Type
string
Default
nil
variant
Type
string
Default
"surface"
width
Width utility class string or map. `100px` or `%{xs: '100px', sm: '200px'}`
Type
any
Default
—
Item
Represents individual values of the control.
| Prop | Type | Default | Description |
|---|---|---|---|
class
|
string
|
nil
|
Additional CSS classes to add to the element. |
id
|
string
|
nil
|
|
style
|
string
|
""
|
|
value
|
string
|
—
|
The value this item represents. |
class
Additional CSS classes to add to the element.
Type
string
Default
nil
id
Type
string
Default
nil
style
Type
string
Default
""
value
The value this item represents.
Type
string
Default
—
Examples
Size
Use the size prop to control the size of the control.
<.flex align="start" direction="column" gap="4">
<.segmented_control id="segmented-control-size-1" default_value="inbox" size="1">
<:option value="inbox">Inbox</:option>
<:option value="drafts">Drafts</:option>
<:option value="sent">Sent</:option>
</.segmented_control>
<.segmented_control id="segmented-control-size-2" default_value="inbox" size="2">
<:option value="inbox">Inbox</:option>
<:option value="drafts">Drafts</:option>
<:option value="sent">Sent</:option>
</.segmented_control>
<.segmented_control id="segmented-control-size-3" default_value="inbox" size="3">
<:option value="inbox">Inbox</:option>
<:option value="drafts">Drafts</:option>
<:option value="sent">Sent</:option>
</.segmented_control>
</.flex>Variant
Use the variant prop to control the visual style of the control.
<.flex align="start" direction="column" gap="4">
<.segmented_control
id="segmented-control-variant-surface"
default_value="inbox"
variant="surface"
>
<:option value="inbox">Inbox</:option>
<:option value="drafts">Drafts</:option>
<:option value="sent">Sent</:option>
</.segmented_control>
<.segmented_control
id="segmented-control-variant-classic"
default_value="inbox"
variant="classic"
>
<:option value="inbox">Inbox</:option>
<:option value="drafts">Drafts</:option>
<:option value="sent">Sent</:option>
</.segmented_control>
</.flex>Radius
Use the radius prop to assign a specific radius value.
<.flex align="start" direction="column" gap="4">
<.segmented_control id="segmented-control-radius-none" default_value="inbox" radius="none">
<:option value="inbox">Inbox</:option>
<:option value="drafts">Drafts</:option>
<:option value="sent">Sent</:option>
</.segmented_control>
<.segmented_control id="segmented-control-radius-small" default_value="inbox" radius="small">
<:option value="inbox">Inbox</:option>
<:option value="drafts">Drafts</:option>
<:option value="sent">Sent</:option>
</.segmented_control>
<.segmented_control id="segmented-control-radius-medium" default_value="inbox" radius="medium">
<:option value="inbox">Inbox</:option>
<:option value="drafts">Drafts</:option>
<:option value="sent">Sent</:option>
</.segmented_control>
<.segmented_control id="segmented-control-radius-large" default_value="inbox" radius="large">
<:option value="inbox">Inbox</:option>
<:option value="drafts">Drafts</:option>
<:option value="sent">Sent</:option>
</.segmented_control>
<.segmented_control id="segmented-control-radius-full" default_value="inbox" radius="full">
<:option value="inbox">Inbox</:option>
<:option value="drafts">Drafts</:option>
<:option value="sent">Sent</:option>
</.segmented_control>
</.flex>