Build · New

Radio Group

For choosing exactly one option from a short list that's all in view; picking one clears the others. The circle sits at the inline start.

Preview

Mirrored is the same English content laid out right to left: it separates a mirroring bug from a translation one.

Installation

SoonInstalling from the registry opens at launch. Until then the command below is what it will be.

npx shadcn@latest add @ritla/radio

Dependencies it brings: @base-ui/react

Usage

import { Radio, RadioGroup } from "@/components/ui/radio";

<RadioGroup label="Delivery" name="delivery" defaultValue="standard">
  <Radio value="standard">Standard</Radio>
  <Radio value="express">Express</Radio>
</RadioGroup>

Examples

States and size

error marks every circle, disabled and readOnly apply to the whole group, and size="lg" is the large touch circle with its halo.

API reference

RadioGroup

Prop	Type	Description
`label`	`ReactNode`	Figma's Label: the group's name.
`value / defaultValue`	`string \| null`	The chosen option.
`onValueChange`	`(value: string) => void`	When an option is picked.
`name`	`string`	Form field name.
`required / helperText / error / disabled / readOnly`	`…`	As on Input Field; an error marks every circle.

Radio

Prop	Type	Default	Description
`value`	`string`		The option's value. Required.
`children`	`ReactNode`		Figma's Label: the option's text.
`description`	`ReactNode`		A helper line.
`size`	`"sm" \| "lg"`	`"sm"`	Small (Web) or Large (Native).
`disabled / readOnly`	`boolean`		For one option.

Accessibility

Keyboard

Keys are written for left-to-right. In right-to-left the arrow keys swap: the one pointing toward the reading direction moves forward.

Key	Action
`Tab`	Enters the group at the chosen (or first) option, and leaves it.
`ArrowDownArrowRight`	Next option, and selects it. In Arabic, ArrowLeft is next.
`ArrowUpArrowLeft`	Previous option, and selects it.

ARIA

role="radiogroup" named by its label and linked to its helper or error; each option is role="radio" named by its text.
Don't act on selection; wait for submit.

Arabic and RTL notes

Mirrors

The circles sit at the inline start (the right), and the horizontal arrows follow the reading order.

Does not mirror

The dot is symmetric.

Numerals: No numbers in the circle.
Arabic typography: Options are label-16 Medium, descriptions label-12.

All components ›