RadioGroup

Accessible radio group (APG radio group): one tab stop for the whole group, arrows move and select, and the checked radio is the tabbable one — which is what makes a keyboard user land back where they left.

A native <input type="radio"> would give the keyboard behaviour for free but not the layout, so this reimplements the pattern rather than fighting appearance:none. name submits, like the rest of the kit's controls.

Forms · two-way: bind:value · submits in a form with name · keyboard contract

<script lang="ts">
	import { RadioGroup } from '@l4st/driftwood';
</script>

Light	Dark

Props

Prop	Type	Default	What it does
options required	RadioOption[]	—	In render order. A description renders as a second line.
value bind:	string	—	The checked option's value.
disabled	boolean	false
name	string	—	Submits the checked value with the form.
class	string	—	Merged with the component's own classes, last — so yours win.
aria-label	string	—	Names the group, e.g. "Scan depth".
aria-labelledby	string	—	Id of the element that names this, instead of aria-label.
onValueChange	(value: string) => void	—	Fires with the newly checked value.

Types

export type RadioOption = {
	/** The checked option's value. */
	value: string;
	label: string;
	/** Second line under the label. */
	description?: string;
	/** Disables the whole group. Disables the whole group. */
	disabled?: boolean;
};

Keyboard

Key	Does
↑ / ↓, ← / →	move to the next radio and select it
Tab	leave the group — the checked radio is the only tab stop

Example

The markup behind the screenshot above, lifted from src/routes/shots/ — so it compiles, and it is exactly what produced the image.

<RadioGroup
	options={[
		{ value: 'quick', label: 'Quick scan', description: 'Names and sizes only.' },
		{ value: 'full', label: 'Full scan', description: 'Reads every file. Slower.' },
		{ value: 'custom', label: 'Custom', disabled: true }
	]}
	value="full"
	aria-label="Scan depth"
/>

Forms · Field · Input · FileInput · FileList · Textarea · CodeEditor · Combobox · NumberInput · InlineEdit · Label · Select · MultiSelect · DatePicker · TagsInput · Checkbox · Switch · Slider

---

← All components · Getting started · Theming · source