Radio groups

Single-choice radio groups in three layouts: simple inline list, bordered cards with checkmark, and a flat color picker.

Preview

Notifications

How do you prefer to receive notifications?

Select a mailing list
Choose a label color

React preview

LiveView (HEEx) 

alias DesignSystem.UI.RadioGroups

<RadioGroups.radio_group
  name="notification-method"
  legend="Notifications"
  value="email"
  options={[
    %{value: "email", label: "Email"},
    %{value: "sms", label: "Phone (SMS)"},
    %{value: "push", label: "Push notification"}
  ]}
  variant="simple"
/>

<RadioGroups.color_radio_group
  name="color"
  legend="Choose a label color"
  value="pink"
  options={[
    %{value: "pink", label: "Pink",
      swatch_class: "bg-pink-500 checked:outline-pink-500"},
    %{value: "blue", label: "Blue",
      swatch_class: "bg-blue-500 checked:outline-blue-500"}
  ]}
/>

React (JSX) 

import { ColorRadioGroup, RadioGroup } from "../ui/index.mjs"

<RadioGroup
  name="notification-method"
  legend="Notifications"
  value={method}
  onChange={setMethod}
  options={[
    { value: "email", label: "Email" },
    { value: "sms", label: "Phone (SMS)" },
  ]}
  variant="simple"
/>

<ColorRadioGroup
  name="color"
  legend="Choose a label color"
  value={color}
  onChange={setColor}
  options={[
    { value: "pink", label: "Pink",
      swatchClass: "bg-pink-500 data-checked:outline-pink-500" },
    { value: "blue", label: "Blue",
      swatchClass: "bg-blue-500 data-checked:outline-blue-500" },
  ]}
/>