Radio

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

<.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>

<.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>

<%!-- 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>

<.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>

<.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>

<.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>

<.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>

<.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>