Radio group

New

Overview

A native radio group for selecting one of a set of options.

Notification frequency

Choose how often to receive a summary.

In real time

Daily summary

Weekly summary

HEEx

<div class="example-fields w-full">
  <Radio.radio_group
    id="example-notification-frequency"
    name="notification_frequency"
    label="Notification frequency"
    description="Choose how often to receive a summary."
    value="daily"
  >
    <:radio value="realtime" label="In real time" />
    <:radio value="daily" label="Daily summary" />
    <:radio value="weekly" label="Weekly summary" />
  </Radio.radio_group>
</div>

Errors

When bound with field, validation errors render beneath the radio group.

HEEx

<.form
  :let={form}
  for={
    to_form(%{"notification_frequency" => ""},
      errors: [notification_frequency: {"can't be blank", []}]
    )
  }
  id="example-radio-group-errors-form"
  class="example-fields w-full"
>
  <Radio.radio_group
    field={form[:notification_frequency]}
    label="Notification frequency"
  >
    <:radio value="realtime" label="In real time" />
    <:radio value="daily" label="Daily summary" />
    <:radio value="weekly" label="Weekly summary" />
  </Radio.radio_group>
</.form>

Add this module

terminal

mix dizzy.add radio_group

Component API

Radio.radio_group

Attributes

Attributes for Radio.radio_group
Name	Type	Default	Values
`class`	`:any`	nil	—
`description`	`:string`	nil	—
`disabled`	`:boolean`	false	—
`errors`	`:list`	[]	—
`field`	`{:struct, Phoenix.HTML.FormField}`	nil	—
`id`	`:string`	nil	—
`label`	`:string`	nil	—
`name`	`:string`	nil	—
`required`	`:boolean`	false	—
`rest`	`:global`	nil	—
`value`	`:any`	nil	—

Slots

Slots for Radio.radio_group
Name	Required	Attributes
`radio`	Required	value, label, description, checked, disabled