Radio Group

Style

Semantic colors, density steps, corner radius, and width utilities via modifier classes on the radio group.

Hex doc

Phoenix

Semantic

Use class="ui-{role}" to set the semantic palette of a radio group.

Available options: accent, alert, brand, info, success

Lorem ipsum dolor sit amet Duis dictum gravida odio ac pharetra? Donec condimentum ex mi

    <.radio_group name="rg-style-default" class="radio-group" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-accent" class="radio-group ui-accent" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-brand" class="radio-group ui-brand" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-alert" class="radio-group ui-alert" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-success" class="radio-group ui-success" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-info" class="radio-group ui-info" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

Size

Use class="ui-size-{size}" to set the size of a radio group.

Available options: xs, sm, md (default), lg, xl

Lorem ipsum dolor sit amet Duis dictum gravida odio ac pharetra? Donec condimentum ex mi

    <.radio_group name="rg-style-sm" class="radio-group ui-size-sm" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-md" class="radio-group ui-size-md" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-lg" class="radio-group ui-size-lg" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-xl" class="radio-group ui-size-xl" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

Rounded

Use class="ui-rounded-{step}" to set the corner radius of a radio group.

Available options: none, xs, sm, md, lg, xl, 2xl, 3xl, 4xl, full (default)

    <.radio_group name="rg-style-rounded-none" class="radio-group ui-rounded-none" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-rounded-sm" class="radio-group ui-rounded-sm" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-rounded-md" class="radio-group ui-rounded-md" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-rounded-lg" class="radio-group ui-rounded-lg" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-rounded-xl" class="radio-group ui-rounded-xl" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>
<.radio_group name="rg-style-rounded-full" class="radio-group ui-rounded-full" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

Width

Without w-*, width comes from component CSS. Default for radio-group: md (width: fit-content).

Use class="w-{step}" to set the host stretch mode of a radio group (`w-full`, `w-fit`); use Max width for named container steps.

Available options: default (fit-content), full, fit

default (fit-content)

Lorem ipsum dolor sit amet Duis dictum gravida odio ac pharetra? Donec condimentum ex mi

full

Lorem ipsum dolor sit amet Duis dictum gravida odio ac pharetra? Donec condimentum ex mi

fit

Lorem ipsum dolor sit amet Duis dictum gravida odio ac pharetra? Donec condimentum ex mi

    <.radio_group name="rg-style-width-default" class="radio-group" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-width-full" class="radio-group w-full" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-width-fit" class="radio-group w-fit" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

Max width

Without max-w-*, width comes from component CSS. Default for radio-group: md (width: fit-content).

Use class="max-w-{step}" to set the maximum width of a radio group root.

Available options: none, full, 9xs, 8xs, 7xs, 6xs, 5xs, 4xs, 3xs, 2xs, xs, sm, md (default), lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl

    <.radio_group name="rg-style-max-default" class="radio-group" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-none" class="radio-group max-w-none" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-full" class="radio-group max-w-full" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-9xs" class="radio-group max-w-9xs" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-8xs" class="radio-group max-w-8xs" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-7xs" class="radio-group max-w-7xs" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-6xs" class="radio-group max-w-6xs" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-5xs" class="radio-group max-w-5xs" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-4xs" class="radio-group max-w-4xs" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-3xs" class="radio-group max-w-3xs" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-2xs" class="radio-group max-w-2xs" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-xs" class="radio-group max-w-xs" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-sm" class="radio-group max-w-sm" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-md" class="radio-group max-w-md" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-lg" class="radio-group max-w-lg" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-xl" class="radio-group max-w-xl" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-2xl" class="radio-group max-w-2xl" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-3xl" class="radio-group max-w-3xl" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-4xl" class="radio-group max-w-4xl" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-5xl" class="radio-group max-w-5xl" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-6xl" class="radio-group max-w-6xl" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-7xl" class="radio-group max-w-7xl" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-8xl" class="radio-group max-w-8xl" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>

<.radio_group name="rg-style-max-9xl" class="radio-group max-w-9xl" value="lorem" items={[
  %{value: "lorem", label: "Lorem ipsum dolor sit amet"},
  %{value: "duis", label: "Duis dictum gravida odio ac pharetra?"},
  %{value: "donec", label: "Donec condimentum ex mi"}
]}
>
  <:item_control><.heroicon name="hero-check" class="data-checked" /></:item_control>

</.radio_group>