Native Solid 2 fork. Original documentation and designs © WorkOS; historical posts retain their original context.

Radio Group

import { RadioGroup } from "@radix-solid/primitives";
import styles from "./styles.module.css";
const RadioGroupDemo = () => <form>
		<RadioGroup.Root class={styles.Root} defaultValue="default" aria-label="View density">
			<div style={{
      "display": "flex",
      "align-items": "center"
    }}>
				<RadioGroup.Item class={styles.Item} value="default" id="r1">
					<RadioGroup.Indicator class={styles.Indicator} />
				</RadioGroup.Item>
				<label class={styles.Label} for="r1">
					Default
				</label>
			</div>
			<div style={{
      "display": "flex",
      "align-items": "center"
    }}>
				<RadioGroup.Item class={styles.Item} value="comfortable" id="r2">
					<RadioGroup.Indicator class={styles.Indicator} />
				</RadioGroup.Item>
				<label class={styles.Label} for="r2">
					Comfortable
				</label>
			</div>
			<div style={{
      "display": "flex",
      "align-items": "center"
    }}>
				<RadioGroup.Item class={styles.Item} value="compact" id="r3">
					<RadioGroup.Indicator class={styles.Indicator} />
				</RadioGroup.Item>
				<label class={styles.Label} for="r3">
					Compact
				</label>
			</div>
		</RadioGroup.Root>
	</form>;
export default RadioGroupDemo;

Anatomy

Import all parts and piece them together.

import { RadioGroup } from "@radix-solid/primitives";
export default () => <RadioGroup.Root>
		<RadioGroup.Item value="item">
			<RadioGroup.Indicator />
		</RadioGroup.Item>
	</RadioGroup.Root>;

API Reference

Root

Contains all the parts of a radio group.

Item

An item in the group that can be checked. An input will also render when used within a form to ensure events propagate correctly.

Indicator

Renders when the radio item is in a checked state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

Examples

Decoupling the hidden input

By default, RadioGroup.Item renders a visually hidden input for form submission. To recompose, move, or exclude that input, you can build each item from its lower-level parts instead.

Important: These parts are unstable and prefixed with unstable_, so their API may change in a future release.

• RadioGroup.unstable_ItemProvider provides the item state and accepts the item's value and disabled props.
• RadioGroup.unstable_ItemTrigger is the interactive element that wraps RadioGroup.Indicator.
• RadioGroup.unstable_ItemBubbleInput is the visually hidden input that RadioGroup.Item renders by default. Omit it when you don't need form submission.

import { RadioGroup } from "@radix-solid/primitives";
export default () => <RadioGroup.Root>
		{["one", "two", "three"].map(value => <RadioGroup.unstable_ItemProvider value={value}>
				<RadioGroup.unstable_ItemTrigger>
					<RadioGroup.Indicator />
				</RadioGroup.unstable_ItemTrigger>
				<RadioGroup.unstable_ItemBubbleInput />
			</RadioGroup.unstable_ItemProvider>)}
	</RadioGroup.Root>;

Accessibility

Adheres to the Radio Group WAI-ARIA design pattern and uses roving tabindex to manage focus movement among radio items.

Keyboard Interactions