Radio · group · segmented
Radio groups on real radios — descriptions, disabled options, rows, tiles and a segmented control whose pill slides to the choice; arrow keys work as they do natively.
Default · descriptions · disabled
Row · sizes
Cards
Segmented · the pill slides
shipping: standard · appearance: system · size: m · plan: pro · view: week · ← → move between options, as with any radio group
Usage
import { signal } from "./index.js";import { RadioGroup, Radio } from "./components/checkbox.js"; const ship = signal("standard");RadioGroup({ value: ship, label: "Shipping", options: [ { value: "standard", label: "Standard", description: "4–6 days · free" }, { value: "pickup", label: "Pick up", disabled: true },] }) // variant: "default" · "card" · "segmented" (a sliding pill) — direction: "row" · "column"RadioGroup({ value: plan, variant: "card", direction: "row", options: plans })RadioGroup({ value: view, variant: "segmented", options: ["Day", "Week", "Month"] }) // one radio for a layout of your ownRadio({ name: "pay", group: method, value: "card", label: "Card" })