Shadix

Radio Group

A group of radio buttons backed by a native input; each item is field-aware and reflects checked state via CSS only. 

<.radio_group></.radio_group>

Examples

Default

Three options with the first pre-selected.

<.radio_group>
  <span class="flex items-center gap-2">
    <.radio_group_item
      field={Phoenix.Component.to_form(%{"tier" => "starter"})[:tier]}
      value="starter"
    />
    <.label for="tier_starter">Starter</.label>
  </span>
  <span class="flex items-center gap-2">
    <.radio_group_item
      field={Phoenix.Component.to_form(%{"tier" => "starter"})[:tier]}
      value="pro"
    />
    <.label for="tier_pro">Pro</.label>
  </span>
  <span class="flex items-center gap-2">
    <.radio_group_item
      field={Phoenix.Component.to_form(%{"tier" => "starter"})[:tier]}
      value="enterprise"
    />
    <.label for="tier_enterprise">Enterprise</.label>
  </span>
</.radio_group>

Disabled

Items can be individually disabled.

<.radio_group>
  <span class="flex items-center gap-2">
    <.radio_group_item
      field={Phoenix.Component.to_form(%{"billing" => "starter"})[:billing]}
      value="starter"
      disabled
    />
    <.label for="billing_starter" class="opacity-50">Starter</.label>
  </span>
  <span class="flex items-center gap-2">
    <.radio_group_item
      field={Phoenix.Component.to_form(%{"billing" => "starter"})[:billing]}
      value="pro"
      disabled
    />
    <.label for="billing_pro" class="opacity-50">Pro</.label>
  </span>
</.radio_group>

Props

Name Type Default Values
class :string
rest :global
inner_block (slot) :slot