Documentation Playground
Skip to content
Docs

Radio

Standalone radio button that can be used in any layout. 
<.flex align="start" direction="column" gap="1">
  <.text as="label" size="2">
    <.flex gap="2"><.radio name="radio-hero" value="1" default_checked />Default</.flex>
  </.text>
  <.text as="label" size="2">
    <.flex gap="2"><.radio name="radio-hero" value="2" />Comfortable</.flex>
  </.text>
  <.text as="label" size="2">
    <.flex gap="2"><.radio name="radio-hero" value="3" />Compact</.flex>
  </.text>
</.flex>

API Reference

This component is based on the input element and supports common margin props.

Prop Type Default Description
checked boolean nil Controlled checked state.
class string nil Additional CSS classes to add to the element.
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_checked boolean false Initial checked state. If true, radio starts checked.
disabled boolean false Whether the radio is disabled.
high_contrast boolean — Whether to increase color contrast with the background.
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 — Form name attribute for grouping radios.
size string "2" Radio size from 1 to 3. Controls overall dimensions and indicator size.
style string ""
value string — Form value attribute.
variant string "surface" Visual style variant. One of 'surface', 'classic', or 'soft'.
checked Controlled checked state.
Type boolean Default nil
class Additional CSS classes to add to the element.
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_checked Initial checked state. If true, radio starts checked.
Type boolean Default false
disabled Whether the radio is disabled.
Type boolean Default false
high_contrast Whether to increase color contrast with the background.
Type boolean 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 Form name attribute for grouping radios.
Type string Default —
size Radio size from 1 to 3. Controls overall dimensions and indicator size.
Type string Default "2"
style
Type string Default ""
value Form value attribute.
Type string Default —
variant Visual style variant. One of 'surface', 'classic', or 'soft'.
Type string Default "surface"

Examples

Size

Use the size prop to control the radio button size.

<.flex align="center" gap="4">
  <.flex gap="2">
    <.radio size="1" name="radio-size-1" value="1" default_checked /><.radio
      size="1"
      name="radio-size-1"
      value="2"
    />
  </.flex>
  <.flex gap="2">
    <.radio size="2" name="radio-size-2" value="1" default_checked /><.radio
      size="2"
      name="radio-size-2"
      value="2"
    />
  </.flex>
  <.flex gap="2">
    <.radio size="3" name="radio-size-3" value="1" default_checked /><.radio
      size="3"
      name="radio-size-3"
      value="2"
    />
  </.flex>
</.flex>

Variant

Use the variant prop to control the visual style of the radio buttons.

<.flex align="center" gap="4">
  <.flex gap="2">
    <.radio variant="surface" name="radio-variant-surface" value="1" default_checked /><.radio
      variant="surface"
      name="radio-variant-surface"
      value="2"
    />
  </.flex>
  <.flex gap="2">
    <.radio variant="classic" name="radio-variant-classic" value="1" default_checked /><.radio
      variant="classic"
      name="radio-variant-classic"
      value="2"
    />
  </.flex>
  <.flex gap="2">
    <.radio variant="soft" name="radio-variant-soft" value="1" default_checked /><.radio
      variant="soft"
      name="radio-variant-soft"
      value="2"
    />
  </.flex>
</.flex>

Color

Use the color prop to assign a specific accent color.

<.flex gap="2">
  <.radio color="indigo" name="radio-color-indigo" value="1" default_checked /><.radio
    color="cyan"
    name="radio-color-cyan"
    value="1"
    default_checked
  /><.radio color="orange" name="radio-color-orange" value="1" default_checked /><.radio
    color="crimson"
    name="radio-color-crimson"
    value="1"
    default_checked
  />
</.flex>

High-contrast

Use the high_contrast prop to increase color contrast with the background.

<.grid columns="5" display="inline-grid" gap="2">
  <.radio color="indigo" name="radio-hc-indigo" value="1" default_checked /><.radio
    color="cyan"
    name="radio-hc-cyan"
    value="1"
    default_checked
  /><.radio color="orange" name="radio-hc-orange" value="1" default_checked /><.radio
    color="crimson"
    name="radio-hc-crimson"
    value="1"
    default_checked
  /><.radio color="gray" name="radio-hc-gray" value="1" default_checked /><.radio
    color="indigo"
    name="radio-hc-indigo-contrast"
    value="1"
    default_checked
    high_contrast
  /><.radio color="cyan" name="radio-hc-cyan-contrast" value="1" default_checked high_contrast /><.radio
    color="orange"
    name="radio-hc-orange-contrast"
    value="1"
    default_checked
    high_contrast
  /><.radio
    color="crimson"
    name="radio-hc-crimson-contrast"
    value="1"
    default_checked
    high_contrast
  /><.radio color="gray" name="radio-hc-gray-contrast" value="1" default_checked high_contrast />
</.grid>

Alignment

Composing radio within text automatically centers it with the first line of text. It is automatically well-aligned with multi-line text too.

<.flex direction="column" gap="3">
  <.flex align="start" direction="column" gap="1">
    <.text as="label" size="2">
      <.flex gap="2">
        <.radio size="1" name="radio-align-1" value="1" default_checked />Default
      </.flex>
    </.text>
    <.text as="label" size="2">
      <.flex gap="2"><.radio size="1" name="radio-align-1" value="2" />Compact</.flex>
    </.text>
  </.flex>
  <.flex align="start" direction="column" gap="1">
    <.text as="label" size="3">
      <.flex gap="2">
        <.radio size="2" name="radio-align-2" value="1" default_checked />Default
      </.flex>
    </.text>
    <.text as="label" size="3">
      <.flex gap="2"><.radio size="2" name="radio-align-2" value="2" />Compact</.flex>
    </.text>
  </.flex>
  <.flex align="start" direction="column" gap="1">
    <.text as="label" size="4">
      <.flex gap="2">
        <.radio size="3" name="radio-align-3" value="1" default_checked />Default
      </.flex>
    </.text>
    <.text as="label" size="4">
      <.flex gap="2"><.radio size="3" name="radio-align-3" value="2" />Compact</.flex>
    </.text>
  </.flex>
</.flex>

Disabled

Use the native disabled attribute to create a disabled radio button.

<.flex direction="column" gap="3">
  <.flex align="start" direction="column" gap="1">
    <.text as="label" size="2">
      <.flex gap="2"><.radio name="radio-enabled" value="1" default_checked />On</.flex>
    </.text>
    <.text as="label" size="2">
      <.flex gap="2"><.radio name="radio-enabled" value="2" />Off</.flex>
    </.text>
  </.flex>
  <.flex align="start" direction="column" gap="1">
    <.text as="label" size="2" color="gray">
      <.flex gap="2"><.radio disabled name="radio-disabled" value="1" default_checked />On</.flex>
    </.text>
    <.text as="label" size="2" color="gray">
      <.flex gap="2"><.radio disabled name="radio-disabled" value="2" />Off</.flex>
    </.text>
  </.flex>
</.flex>
← Progress Radio Cards →