<.radio_group_root id="radio-group-hero" default_value="1" name="radio-group-hero">
<.radio_group_item value="1">Default</.radio_group_item>
<.radio_group_item value="2">Comfortable</.radio_group_item>
<.radio_group_item value="3">Compact</.radio_group_item>
</.radio_group_root>API Reference
This component wraps the Radio Group primitive and supports common margin props.
Root
Contains all the parts of a radio group.
| Prop | Type | Default | Description |
|---|---|---|---|
as_child
|
boolean
|
false
|
Composes the component into its immediate child instead of rendering its own HTML element. |
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
|
|
high_contrast
|
boolean
|
—
|
Whether to increase color contrast with the background. |
id
|
string
|
—
|
|
m
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mb
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
ml
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mr
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mt
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mx
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
my
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
name
|
string
|
nil
|
|
on_change
|
string
|
nil
|
|
orientation
|
string
|
"vertical"
|
|
required
|
boolean
|
false
|
|
size
|
string
|
"2"
|
|
value
|
string
|
nil
|
|
variant
|
string
|
"surface"
|
as_child
Composes the component into its immediate child instead of rendering its own HTML element.
Type
boolean
Default
false
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
high_contrast
Whether to increase color contrast with the background.
Type
boolean
Default
—
id
Type
string
Default
—
m
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mb
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
ml
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mr
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mt
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mx
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
my
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
name
Type
string
Default
nil
on_change
Type
string
Default
nil
orientation
Type
string
Default
"vertical"
required
Type
boolean
Default
false
size
Type
string
Default
"2"
value
Type
string
Default
nil
variant
Type
string
Default
"surface"
Item
An item in the group that can be checked.
| Prop | Type | Default | Description |
|---|---|---|---|
checked
|
boolean
|
false
|
|
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. |
disabled
|
boolean
|
false
|
|
high_contrast
|
boolean
|
—
|
Whether to increase color contrast with the background. |
id
|
string
|
nil
|
|
m
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mb
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
ml
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mr
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mt
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
mx
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
my
|
any
|
—
|
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}` |
size
|
string
|
"2"
|
|
value
|
string
|
—
|
|
variant
|
string
|
"surface"
|
checked
Type
boolean
Default
false
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
—
disabled
Type
boolean
Default
false
high_contrast
Whether to increase color contrast with the background.
Type
boolean
Default
—
id
Type
string
Default
nil
m
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mb
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
ml
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mr
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mt
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
mx
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
my
Margin utility class string or map. Example: `1` or `%{xs: '1', sm: '2'}`
Type
any
Default
—
size
Type
string
Default
"2"
value
Type
string
Default
—
variant
Type
string
Default
"surface"
Examples
Size
Use the size prop to control the radiobutton size.
<.flex align="center" gap="2">
<.radio_group_root id="radio-group-size-1" size="1" default_value="1">
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root id="radio-group-size-2" size="2" default_value="1">
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root id="radio-group-size-3" size="3" default_value="1">
<.radio_group_item value="1" />
</.radio_group_root>
</.flex>Variant
Use the variant prop to control the visual style of the radio buttons.
<.flex gap="2">
<.radio_group_root
id="radio-group-variant-surface"
variant="surface"
default_value="1"
name="rg-variant-surface"
>
<.radio_group_item value="1" /><.radio_group_item value="2" />
</.radio_group_root>
<.radio_group_root
id="radio-group-variant-classic"
variant="classic"
default_value="1"
name="rg-variant-classic"
>
<.radio_group_item value="1" /><.radio_group_item value="2" />
</.radio_group_root>
<.radio_group_root
id="radio-group-variant-soft"
variant="soft"
default_value="1"
name="rg-variant-soft"
>
<.radio_group_item value="1" /><.radio_group_item value="2" />
</.radio_group_root>
</.flex>Color
Use the color prop to assign a specific accent color.
<.flex gap="2">
<.radio_group_root
id="radio-group-color-indigo"
color="indigo"
default_value="1"
name="rg-color-indigo"
>
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root
id="radio-group-color-cyan"
color="cyan"
default_value="1"
name="rg-color-cyan"
>
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root
id="radio-group-color-orange"
color="orange"
default_value="1"
name="rg-color-orange"
>
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root
id="radio-group-color-crimson"
color="crimson"
default_value="1"
name="rg-color-crimson"
>
<.radio_group_item value="1" />
</.radio_group_root>
</.flex>High-contrast
Use the high_contrast prop to increase color contrast with the background.
<.grid rows="2" gap="2" display="inline-grid" flow="column">
<.radio_group_root
id="radio-group-hc-indigo"
color="indigo"
default_value="1"
name="rg-hc-indigo"
>
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root
id="radio-group-hc-indigo-contrast"
color="indigo"
default_value="1"
high_contrast
name="rg-hc-indigo-contrast"
>
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root id="radio-group-hc-cyan" color="cyan" default_value="1" name="rg-hc-cyan">
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root
id="radio-group-hc-cyan-contrast"
color="cyan"
default_value="1"
high_contrast
name="rg-hc-cyan-contrast"
>
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root
id="radio-group-hc-orange"
color="orange"
default_value="1"
name="rg-hc-orange"
>
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root
id="radio-group-hc-orange-contrast"
color="orange"
default_value="1"
high_contrast
name="rg-hc-orange-contrast"
>
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root
id="radio-group-hc-crimson"
color="crimson"
default_value="1"
name="rg-hc-crimson"
>
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root
id="radio-group-hc-crimson-contrast"
color="crimson"
default_value="1"
high_contrast
name="rg-hc-crimson-contrast"
>
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root id="radio-group-hc-gray" color="gray" default_value="1" name="rg-hc-gray">
<.radio_group_item value="1" />
</.radio_group_root>
<.radio_group_root
id="radio-group-hc-gray-contrast"
color="gray"
default_value="1"
high_contrast
name="rg-hc-gray-contrast"
>
<.radio_group_item value="1" />
</.radio_group_root>
</.grid>Disabled
Use the native disabled attribute to create a disabled radiobutton.
<.flex direction="column" gap="2">
<.radio_group_root
id="radio-group-disabled-enabled"
default_value="2"
name="rg-disabled-enabled"
>
<.radio_group_item value="1">Off</.radio_group_item>
<.radio_group_item value="2">On</.radio_group_item>
</.radio_group_root>
<.radio_group_root id="radio-group-disabled-items" default_value="2" name="rg-disabled-items">
<.radio_group_item value="1" disabled>Off</.radio_group_item>
<.radio_group_item value="2" disabled>On</.radio_group_item>
</.radio_group_root>
</.flex>