Docs

Radio

Select a single option from a predefined set.

<.radio_group field={f[:system]}>
  <:radio value="ubuntu" label="Ubuntu" />
  <:radio value="debian" label="Debian" />
  <:radio value="fedora" label="Fedora" />
</.radio_group>

Description

Include additional context below radio button labels.

User-friendly Linux distribution for beginners and experts alike

Stable and reliable operating system with long-term support

Cutting-edge Linux technology with frequent updates and innovations 

<.radio_group field={f[:lang]}>
  <:radio label="Ubuntu" value="ubuntu" description="User-friendly Linux distribution for beginners and experts alike" />
  <:radio label="Debian" value="debian" description="Stable and reliable operating system with long-term support" />
  <:radio label="Fedora" value="fedora" description="Cutting-edge Linux technology with frequent updates and innovations" />
</.radio_group>

Sublabel

Add sublabels to radio buttons for supplementary details.

User-friendly Linux distribution
Stable and reliable OS
Cutting-edge Linux technology 
<.radio_group field={f[:lang]}>
  <:radio label="Ubuntu" value="ubuntu" sublabel="User-friendly Linux distribution" />
  <:radio label="Debian" value="debian" sublabel="Stable and reliable OS" />
  <:radio label="Fedora" value="fedora" sublabel="Cutting-edge Linux technology" />
</.radio_group>

Disabled

Show radio buttons in a disabled state for unavailable options.

User-friendly OS

User-friendly and widely used for desktop and server environments

Cutting-edge technology

Focuses on the latest free and open-source software and technologies

Minimalist approach

Known for its simplicity and full control over system configuration 

<%!-- disabling the whole radio group --%>
<.radio_group name="system" disabled>
  <:radio value="fedora" label="Fedora" />
  <:radio value="arch" label="Arch Linux" />
</.radio_group>

<%!-- disabling specific radio inputs --%>
<.radio_group name="system">
  <:radio value="fedora" disabled label="Fedora" />
  <:radio value="arch" disabled label="Arch Linux" />
</.radio_group>

Errors

Display validation feedback for radio button groups with error states.

User-friendly OS
Cutting-edge technology
Minimalist approach

Unix distributions are not allowed 

<.radio_group name="system" errors={["Unix distributions are not allowed"]}>
  <:radio value="ubuntu" label="Ubuntu" sublabel="User-friendly OS" />
  <:radio value="fedora" label="Fedora" sublabel="Cutting-edge technology" />
  <:radio value="arch" label="Arch Linux" sublabel="Minimalist approach" />
</.radio_group>

Customization

Style radio buttons while maintaining core functionality.

<.radio_group name="system" class="flex flex-row gap-8">
  <!-- custom color (text-blue-500) -->
  <:radio label="Ubuntu" value="ubuntu" class="text-blue-500" />

  <!-- custom size (size-5) -->
  <:radio label="Debian" value="debian" class="size-5" />
</.radio_group>