Radio
MD3 radio button.
Walkthrough
1. Group
RadioGroup is the fieldset: it carries the legend, the name and the helper line, so the radios inside only need a value and a label.
<script lang="ts"> import { Radio, RadioGroup } from 'omaris'; let speed = $state('standard');</script><RadioGroup label="Delivery" bind:value={speed} supportingText="Charged at checkout."> <Radio value="standard" label="Standard" description="3–5 working days, free" /> <Radio value="express" label="Express" description="Next day, 5,000 IQD" /> <Radio value="pickup" label="Collect in store" description="Ready in an hour" /></RadioGroup>2. Horizontal and states
Horizontal suits a short set of short labels, and nothing else.
<script lang="ts"> import { Radio, RadioGroup } from 'omaris'; let size = $state('m');</script><div class="flex w-full flex-col gap-8"> <RadioGroup label="Size" orientation="horizontal" bind:value={size}> <Radio value="s" label="S" /> <Radio value="m" label="M" /> <Radio value="l" label="L" /> </RadioGroup> <RadioGroup label="Invalid" invalid supportingText="Pick a plan to continue." value=""> <Radio value="free" label="Free" /> <Radio value="pro" label="Pro" /> </RadioGroup> <RadioGroup label="Disabled" disabled value="a"> <Radio value="a" label="Not changeable" /> <Radio value="b" label="Nor this" /> </RadioGroup></div>