Radio

A themed single-selection control (mirrors Checkbox / Toggle), backed by a real <input type="radio">. For the common "N mutually-exclusive options" pattern, wrap them in a FieldGroup — children pick up the shared name + value via context (no per-radio bind:group), and render their label inline. Field chrome (label / description / error) is the same vocabulary as every other field.

FieldGroup (vertical)

Delivery method

Email SMS Push notification

How you'd like to receive updates.

Selected: email

import { FieldGroup, Radio } from '@spaethtech/svelte-ui';

let method = $state('email');

<FieldGroup
  label="Delivery method"
  bind:value={method}
  name="method"
  description="How you'd like to receive updates."
>
  <Radio value="email" label="Email" />
  <Radio value="sms" label="SMS" />
  <Radio value="push" label="Push notification" />
</FieldGroup>

Columns

Default is a stacked list (columns=1). Set columns — a number or a responsive map like { base: 1, md: 3 } — to lay the auto-placed items across equal columns. Items need no props; the grid places them.

Density

Compact Comfortable Spacious

Selected: comfortable

<FieldGroup label="Density" bind:value={layout} name="layout" columns={3}>
  <Radio value="compact" label="Compact" />
  <Radio value="comfortable" label="Comfortable" />
  <Radio value="spacious" label="Spacious" />
</FieldGroup>

Variant & size (inherited from the group)

variant / size set on FieldGroup flow to every child Radio (a Radio can still override its own).

<FieldGroup label="Plan" bind:value={plan} name="plan" variant="success">
  <Radio value="free" label="Free" />
  <Radio value="pro" label="Pro" />
  <Radio value="team" label="Team" />
</FieldGroup>

<FieldGroup label="Tier" bind:value={tier} name="tier" size="sm">
  <Radio value="a" label="Basic" />
  <Radio value="b" label="Standard" />
</FieldGroup>

Standalone `bind:group`

Without a FieldGroup, use the native bind:group pattern; a standalone Radio's label follows the field-chrome rule (rendered above).

Yes

Selected: yes

let choice = $state('yes');

<Radio bind:group={choice} value="yes" label="Yes" />
<Radio bind:group={choice} value="no" label="No" />

Radio

FieldGroup (vertical)

Columns

Variant & size (inherited from the group)

Standalone bind:group

Standalone `bind:group`