Forms

Radio Group

Mutually exclusive choices with arrow-key selection and a visible label.

BetaNew shared patternRegistry JSON

Starter$0One project, community support

Team$24Unlimited projects, shared components

ScaleCustomSSO, audit log, priority support

Selected plan: team

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add radio-group

Writes components/ui/radio-group.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";

Props and composition points for Radio Group. Native element props pass through.

Prop	Type	Default	Description
`value / defaultValue / onValueChange`	`string / string / (value: string) => void`	None	Controlled or uncontrolled selection.
`orientation`	`"horizontal" \| "vertical"`	None	Arrow-key direction for the group.
`RadioGroupItem value`	`string`	None	The value submitted and announced for this option. Required.
`disabled`	`boolean`	None	Removes one option or the whole group from interaction.
`aria-label`	`string`	None	Names the group when no visible legend or heading does.

Dependencies: radix-ui, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Radix exposes radiogroup and radio roles with aria-checked and a single tab stop for the group.
Arrow keys move between options and select as they go; Tab enters and leaves the group.
Associate a visible label with every item using htmlFor. Do not rely on the option value alone.
The checked state uses a solid fill and an inner mark, not colour alone. The square indicator is intentional.

Key	Action
`Tab`	Enter or leave the group.
`ArrowUp`or`ArrowDown`	Move and select in a vertical group.
`ArrowLeft`or`ArrowRight`	Move and select in a horizontal group.
`Space`	Select the focused option without moving.

The Aback products whose interfaces shaped this component.

This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.