Documentation Playground
Skip to content
Docs

Radio Cards

Set of interactive cards where only one can be selected at a time. 
<.box max_width="600px">
  <.radio_cards_root id="radio-cards-hero" default_value="1" columns="3">
    <.radio_cards_item value="1">
      <.flex direction="column" width="100%">
        <.text weight="bold">8-core CPU</.text>
        <.text>32 GB RAM</.text>
      </.flex>
    </.radio_cards_item>
    <.radio_cards_item value="2">
      <.flex direction="column" width="100%">
        <.text weight="bold">6-core CPU</.text>
        <.text>24 GB RAM</.text>
      </.flex>
    </.radio_cards_item>
    <.radio_cards_item value="3">
      <.flex direction="column" width="100%">
        <.text weight="bold">4-core CPU</.text>
        <.text>16 GB RAM</.text>
      </.flex>
    </.radio_cards_item>
  </.radio_cards_root>
</.box>

API Reference

This component supports common margin props.

Root

Prop Type Default Description
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.
columns any — Number of columns: 1-9 or CSS value. Responsive supported.
default_value string nil Initial checked value.
gap string — Gap utility class (0-9, -1 to -9)
gap_x string — Row gap utility class (0-9, -1 to -9)
gap_y string — Column gap utility class (0-9, -1 to -9)
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'}`
size string "2" Cards size from 1 to 3. Controls overall dimensions and spacing.
style string ""
variant string "surface" Visual style variant. One of 'surface' or 'classic'.
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 —
columns Number of columns: 1-9 or CSS value. Responsive supported.
Type any Default —
default_value Initial checked value.
Type string Default nil
gap Gap utility class (0-9, -1 to -9)
Type string Default —
gap_x Row gap utility class (0-9, -1 to -9)
Type string Default —
gap_y Column gap utility class (0-9, -1 to -9)
Type string Default —
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 —
size Cards size from 1 to 3. Controls overall dimensions and spacing.
Type string Default "2"
style
Type string Default ""
variant Visual style variant. One of 'surface' or 'classic'.
Type string Default "surface"

Item

An item in the group that can be checked.

Prop Type Default Description
class string nil Additional CSS classes.
disabled boolean false Whether this item is disabled.
style string ""
value string — Value for this radio item.
class Additional CSS classes.
Type string Default nil
disabled Whether this item is disabled.
Type boolean Default false
style
Type string Default ""
value Value for this radio item.
Type string Default —

Examples

Size

Use the size prop to control the size.

<.flex align="center" gap="3">
  <.radio_cards_root id="radio-cards-size-1" size="1" default_value="1">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root id="radio-cards-size-2" size="2" default_value="1">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root id="radio-cards-size-3" size="3" default_value="1">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
</.flex>

Variant

Use the variant prop to control the visual style.

<.flex direction="column" gap="3" max_width="200px">
  <.radio_cards_root id="radio-cards-variant-surface" default_value="1" variant="surface">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root id="radio-cards-variant-classic" default_value="1" variant="classic">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
</.flex>

Color

Use the color prop to assign a specific accent color.

<.flex direction="column" gap="3" max_width="200px">
  <.radio_cards_root id="radio-cards-color-indigo" default_value="1" color="indigo">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root id="radio-cards-color-cyan" default_value="1" color="cyan">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root id="radio-cards-color-orange" default_value="1" color="orange">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root id="radio-cards-color-crimson" default_value="1" color="crimson">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
</.flex>

High-contrast

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

<.grid columns="2" gap="3" display="inline-grid">
  <.radio_cards_root id="radio-cards-hc-indigo" default_value="1" color="indigo">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root
    id="radio-cards-hc-indigo-contrast"
    default_value="1"
    color="indigo"
    high_contrast
  >
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root id="radio-cards-hc-cyan" default_value="1" color="cyan">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root
    id="radio-cards-hc-cyan-contrast"
    default_value="1"
    color="cyan"
    high_contrast
  >
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root id="radio-cards-hc-orange" default_value="1" color="orange">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root
    id="radio-cards-hc-orange-contrast"
    default_value="1"
    color="orange"
    high_contrast
  >
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root id="radio-cards-hc-crimson" default_value="1" color="crimson">
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root
    id="radio-cards-hc-crimson-contrast"
    default_value="1"
    color="crimson"
    high_contrast
  >
    <.radio_cards_item value="1">8-core CPU</.radio_cards_item>
  </.radio_cards_root>
</.grid>

Disabled

<.flex direction="column" gap="4" max_width="450px">
  <.radio_cards_root id="radio-cards-disabled-on" columns="2" default_value="2">
    <.radio_cards_item value="1">Off</.radio_cards_item>
    <.radio_cards_item value="2">On</.radio_cards_item>
  </.radio_cards_root>
  <.radio_cards_root id="radio-cards-disabled-all" columns="2" default_value="2">
    <.radio_cards_item value="1" disabled>Off</.radio_cards_item>
    <.radio_cards_item value="2" disabled>On</.radio_cards_item>
  </.radio_cards_root>
</.flex>
← Radio Radio Group →