Forms

RadioGroup

Fieldset that owns the bound value, shared name, and validation state for a set of mutually exclusive radio children.

import { RadioGroup } from '@lostgradient/cinder/radio-group';
formselection
01

Overview

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

Usage

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

<RadioGroup name="disabled-region" label="Region (locked for trial accounts)" value="us" disabled>
  <RadioGroup.Option id="disabled-region-us" value="us" label="United States" />
  <RadioGroup.Option id="disabled-region-eu" value="eu" label="European Union" />
  <RadioGroup.Option id="disabled-region-ap" value="ap" label="Asia Pacific" />
</RadioGroup>
Live preview
02

When to use

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
  • Selecting zero or more independent options — use checkbox-group instead.
03

Examples

Basic radio group

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

Disabled radio group

Disabling the group disables every radio inside.

Radio group with error

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

04

Props

Props for radio-group
NameTypeDefaultDescription
value bindable text '' Bound selected value.
name required text 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 required snippet Radio children.