Radio Group

A set of checkable buttons where only one can be checked at a time.

Default

Select a plan

Free

Pro

Enterprise

    <.radio_group name="plan" label="Select a plan">
  <:radio value="free" label="Free" checked />
  <:radio value="pro" label="Pro" />
  <:radio value="enterprise" label="Enterprise" />
</.radio_group>
  

Horizontal Layout

Radio groups are vertical by default. You can style them horizontally with CSS.

Horizontal

Size

Small

Medium

Large

    <.radio_group name="size" label="Size" class="flex flex-row gap-4">
  <:radio value="sm" label="Small" />
  <:radio value="md" label="Medium" checked />
  <:radio value="lg" label="Large" />
</.radio_group>
  

With Errors

Pass an errors list to display validation messages.

With Errors

Priority

Low

Medium

High

Please select a priority

    <.radio_group name="priority" label="Priority" errors={["Please select a priority"]}>
  <:radio value="low" label="Low" />
  <:radio value="medium" label="Medium" />
  <:radio value="high" label="High" />
</.radio_group>
  

Disabled

Disable the entire group or individual options.

Disabled Group

Disabled group

Option A

Option B

Disabled Option

Availability

Available

Limited

Sold Out

    <.radio_group name="availability" label="Availability">
  <:radio value="available" label="Available" checked />
  <:radio value="limited" label="Limited" />
  <:radio value="sold_out" label="Sold Out" disabled />
</.radio_group>
  

Standalone Radio

Use <.radio> directly for custom layouts.

Standalone

Yes

With Form

Radio groups integrate with Phoenix forms seamlessly.

    <.form for={@form} phx-submit="save">
  <.radio_group name={@form[:plan].name} label="Select a plan">
    <:radio value="free" label="Free" />
    <:radio value="pro" label="Pro" />
    <:radio value="enterprise" label="Enterprise" />
  </.radio_group>
  <.button type="submit">Continue</.button>
</.form>
  