RadioGroup
A set of mutually exclusive options where only one can be selected at a time.
Anatomy
<RadioGroup.Provider bind:value>
<RadioGroup.Item value="a">Option A</RadioGroup.Item>
<RadioGroup.Item value="b">Option B</RadioGroup.Item>
<RadioGroup.Item value="c">Option C</RadioGroup.Item>
</RadioGroup.Provider>
Parts
| Part |
Element |
Description |
Provider |
<div> |
Group container. Manages selected value and orientation. |
Item |
<button> |
Individual radio option. Roving tabindex pattern. |
ARIA
| Part |
Attribute |
Value |
| Provider |
role |
radiogroup |
| Provider |
aria-required |
true (when required) |
| Provider |
aria-orientation |
horizontal | vertical |
| Provider |
aria-readonly |
true (when readonly) |
| Item |
role |
radio |
| Item |
aria-checked |
true | false |
Accessible name required. The root emits role='radiogroup', which requires a name for assistive tech. Pass aria-label on the Provider, or aria-labelledby pointing to a visible heading.
Data Attributes
| Part |
Attribute |
Values |
| Provider |
data-radio-group |
Always present |
| Provider |
data-orientation |
horizontal | vertical |
| Provider |
data-disabled |
Present when disabled |
| Provider |
data-readonly |
Present when readonly |
| Item |
data-radio-group-item |
Always present |
| Item |
data-state |
checked | unchecked |
| Item |
data-disabled |
Present when disabled |
| Item |
data-orientation |
horizontal | vertical |
| Item |
data-value |
The item's value string |
Keyboard
| Key |
Action |
ArrowRight / ArrowDown |
Move to and select next item |
ArrowLeft / ArrowUp |
Move to and select previous item |
Arrow keys both move focus and select the item (roving tabindex pattern). Only the selected item has tabindex=0.
Usage
Basic
<script>
import { RadioGroup } from '$soma/components';
let value = $state('');
</script>
<RadioGroup.Provider bind:value>
<RadioGroup.Item value="small">Small</RadioGroup.Item>
<RadioGroup.Item value="medium">Medium</RadioGroup.Item>
<RadioGroup.Item value="large">Large</RadioGroup.Item>
</RadioGroup.Provider>
Horizontal orientation
<RadioGroup.Provider bind:value orientation="horizontal">
<!-- Left/Right arrows navigate -->
</RadioGroup.Provider>
With form name
<RadioGroup.Provider bind:value name="size">
<!-- Each item renders a hidden radio input for form submission -->
</RadioGroup.Provider>
Disabled item
<RadioGroup.Item value="premium" disabled>Premium</RadioGroup.Item>
dev
73862094f6