Radio Group — cinder playground

Overview

Coordinates a set of radio buttons under a single name with shared validation state.

<script lang="ts">
  import RadioGroup from '@lostgradient/cinder/radio-group';
</script>

<RadioGroup />

Live preview

Use when

Picking exactly one option from a small fixed set where every choice should stay visible.
Sharing a single error and description across a set of related radios.

Avoid when

Three options with a group legend; arrow keys move selection.

Disabling the group disables every radio inside.

When validation fails, the group exposes an aria-describedby error message.

Props for radio-group
Name	Type	Default	Required	Bindable	Description
`value`	`text`	`''`		bind	Bound selected value.
`name`	`text`		req		Shared `name` for all radios in the group; required for native form submission.
`label`	`text`				Visible group caption. Rendered as a `<legend>` inside the `<fieldset>`. Named `label` for consistency with every other form control — the element is a `<legend>` because the group is a fieldset.
`description`	`text`				Helper text displayed below the group; wired via `aria-describedby` on the fieldset.
`error`	`text`				Validation error message; sets `aria-invalid="true"` on the group's children.
`disabled`	`boolean`	`false`			Disables the entire group.
`required`	`boolean`	`false`			When true, marks the group's radios as required for form submission.
`variant`	`'default' \| 'card'`	`'default'`			Visual layout. 'card' wraps each radio row in a bordered surface.
`children`	`snippet`		req		Radio children.