Radio group

New

Overview

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

Each option renders a native radio inputs element.

Notification frequency

Choose how often to receive a summary.

In real time

Daily summary

Weekly summary

HEEx

<.form for={@form}>
  <Radio.radio_group
    field={@form[:notification_frequency]}
    label="Notification frequency"
    description="Choose how often to receive a summary."
  >
    <:radio value="realtime" label="In real time" />
    <:radio value="daily" label="Daily summary" />
    <:radio value="weekly" label="Weekly summary" />
  </Radio.radio_group>
</.form>

Per-option detail

Each :radio slot accepts its own sublabel and description for short metadata and supporting detail.

Operating system

Ubuntu Most popular

Friendly desktop and server distribution with long-term support releases.

Debian Rock solid

A community distribution with a conservative release cycle.

Fedora Latest packages

Tracks upstream releases closely for current development tools.

HEEx

<.form for={@form}>
  <Radio.radio_group field={@form[:operating_system]} label="Operating system">
    <:radio
      value="ubuntu"
      label="Ubuntu"
      sublabel="Most popular"
      description="Friendly desktop and server distribution with long-term support releases."
    />
    <:radio
      value="debian"
      label="Debian"
      sublabel="Rock solid"
      description="A community distribution with a conservative release cycle."
    />
    <:radio
      value="fedora"
      label="Fedora"
      sublabel="Latest packages"
      description="Tracks upstream releases closely for current development tools."
    />
  </Radio.radio_group>
</.form>

Errors

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

HEEx

<.form for={@form}>
  <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
`radio`	Required

Radio slot attributes

Attributes for the radio slot in Radio.radio_group
Name	Type	Default	Values
`value`	`:string`	Required	—
`label`	`:string`	Required	—
`sublabel`	`:string`	nil	—
`description`	`:string`	nil	—
`checked`	`:boolean`	nil	—
`disabled`	`:boolean`	nil	—