Primitives

Radio primitive

Lower-level radio anatomy for custom group and option layouts.

React Aria SourceView as Markdown Edit on GitHub

Use the Radio primitive when a layout needs custom placement for a radio group or its options. For the standard labelled group, use RadioGroup.

Radio primitive: Basic

Open in playground

Text alignment

Left

Right

import { FieldLabel } from '@luke-ui/react/primitives/field';
import {
	RadioControl,
	RadioGroupRoot,
	RadioIndicator,
	RadioLabel,
	RadioRoot,
} from '@luke-ui/react/primitives/radio';
import { Stack } from '@luke-ui/react/stack';

export default () => {
	return (
		<RadioGroupRoot name="alignment">
			<Stack gap="space.8">
				<FieldLabel slot="label">Text alignment</FieldLabel>
				<RadioRoot value="left">
					<RadioLabel>
						<RadioControl>
							<RadioIndicator />
						</RadioControl>
						Left
					</RadioLabel>
				</RadioRoot>
				<RadioRoot value="right">
					<RadioLabel>
						<RadioControl>
							<RadioIndicator />
						</RadioControl>
						Right
					</RadioLabel>
				</RadioRoot>
			</Stack>
		</RadioGroupRoot>
	);
};

Radio primitive: Basic

Loading Radio primitive: Basic example

Anatomy

RadioGroupRoot owns the selection, accessible group name, validation, form value, and size. RadioRoot represents one option and takes its value. RadioLabel provides the clickable option label. Place RadioControl inside it, with RadioIndicator inside the control.

Use FieldLabel, FieldDescription, and FieldError inside RadioGroupRoot when the group label, description, or error needs a custom position. The group root connects those parts to the group. Place a FieldDescription inside RadioRoot to describe one option. Each option still needs a RadioLabel.

Accessibility

Name RadioGroupRoot with FieldLabel, aria-label, or aria-labelledby. Put textual, non-interactive option text inside each RadioLabel, and place links and buttons outside it. The group supports arrow-key navigation between its options.

API

RadioGroupRootProps

RadioGroupRootProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type	Default
orientation	Orientation	`'vertical'`
The axis the Radio Button(s) should align with.
size		`'medium'`
Visual size supplied to options that do not set their own size.

RadioRootProps

RadioRootProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type
inputId	string \|⁠ undefined
Element id for the input.
inputRef	Ref<HTMLInputElement \|⁠ null> \|⁠ undefined
Forwarded to the hidden radio input.
size	"medium" \|⁠ "small" \|⁠ undefined
Visual size of the radio option. Defaults to the group size, then `Form.controlSize`, then `medium`.

RadioLabelProps

RadioLabelProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type

RadioControlProps

RadioControlProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type

RadioIndicatorProps

RadioIndicatorProps also accepts compatible DOM and ARIA attributes and event handlers for its rendered element.

Name	Type