Docs Changelog

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>

Card variant New

Apply card styling to individual radio buttons for a bordered appearance.

Select the number of CPUs

Select the number of CPUs
 
<.radio_group
  name="cpu"
  value="4"
  label="CPUs"
  description="Select the number of CPUs"
  variant="card"
  class="grid grid-cols-3"
>
  <:radio value="2" label="2 CPUs" />
  <:radio value="4" label="4 CPUs" />
  <:radio value="8" label="8 CPUs" />
  <:radio value="16" label="16 CPUs" />
  <:radio value="35" label="35 CPUs" disabled />
  <:radio value="64" label="64 CPUs" disabled />
</.radio_group>

Control position New

Position the radio control on either side of the card content.

 
<.radio_group control="left" name="frontend" value="svelte" label="Frontend Framework" variant="card">
  <:radio value="react" label="React" description="Component-based UI library" />
  <:radio value="vue" label="Vue" description="Progressive JavaScript framework" />
  <:radio value="svelte" label="Svelte" description="Component-based UI library" />
</.radio_group>

<.radio_group control="right" name="backend" value="elixir" label="Backend Framework" variant="card">
  <:radio value="elixir" label="Phoenix" description="Productive web framework" />
  <:radio value="node" label="Node.js" description="JavaScript runtime environment" />
  <:radio value="php" label="Laravel" description="PHP web framework" />
</.radio_group>

Custom content New

Use custom content to enhance the visual appeal of card radios.

 
<.radio_group name="system" value="desktop" label="Hosting Environment" variant="card" class="grid grid-cols-3">
  <:radio value="cloud" class="flex-1">
    <div class="flex flex-col justify-center items-center w-full gap-2">
      <.icon name="hero-cloud" class="size-5" />
      <span class="font-medium text-sm">Cloud</span>
    </div>
  </:radio>

  <:radio value="server" class="flex-1">
    <div class="flex flex-col justify-center items-center w-full gap-2">
      <.icon name="hero-server" class="size-5" />
      <span class="font-medium text-sm">Server</span>
    </div>
  </:radio>

  <:radio value="desktop" class="flex-1">
    <div class="flex flex-col justify-center items-center w-full gap-2">
      <.icon name="hero-computer-desktop" class="size-5" />
      <span class="font-medium text-sm">Desktop</span>
    </div>
  </:radio>
</.radio_group>