Radio group

Provides shared state to a series of radio buttons.

Preview

Installation

Install the local ghost-kit source bundle while the registry runs at localhost:3110. It contains this component and its source dependencies. Prepare the local registry first so token dependencies also resolve locally.

Install

npx shadcn@latest add http://localhost:3110/r/ghost-kit.json

Basic usage

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

<RadioGroup aria-label="Fruit" defaultValue="apple"><RadioGroup.Rows><RadioGroup.Row><RadioGroup.Item value="apple"><RadioGroup.Indicator /></RadioGroup.Item>Apple</RadioGroup.Row></RadioGroup.Rows></RadioGroup>

Use the exported component in the composition shown above. Keep labels, data, and callbacks in the consuming application.

Structures

Examples

Interactive style

Use variant="interactive" to add row hover feedback and an inner control fill. Both styles fill the core control on hover. The default keeps the row and text unchanged. Set the variant on the group to style all its rows. Keyboard focus remains visible in both styles.

The Preview above is the canonical radio-group example. Compose it with the public parts shown in Structure.

API reference

variant accepts "default" | "interactive" and defaults to "default". Set it on RadioGroup to style its rows and controls. Use the group variant for shared-background lists. Group controls align with the group label in both styles.

radio-group properties
Prop	Type	Description
`disabled`	`boolean \| undefined`	Whether the component should ignore user interaction.
`readOnly`	`boolean \| undefined`	Whether the user should be unable to select a different radio button in the group.
`required`	`boolean \| undefined`	Whether the user must choose a value before submitting a form.
`name`	`string \| undefined`	Identifies the field when a form is submitted.
`form`	`string \| undefined`	Identifies the form that owns the radio inputs. Useful when the radio group is rendered outside the form.
`value`	`Value \| undefined`	The controlled value of the radio item that should be currently selected. To render an uncontrolled radio group, use the `defaultValue` prop instead.
`defaultValue`	`Value \| undefined`	The uncontrolled value of the radio button that should be initially selected. To render a controlled radio group, use the `value` prop instead.
`onValueChange`	`((value: Value, eventDetails: BaseRadioGroup.ChangeEventDetails) => void) \| undefined`	Callback fired when the value changes.
`inputRef`	`React.Ref<HTMLInputElement> \| undefined`	A ref to access the hidden input element.
`className`	`string \| ((state: BaseUI.RadioGroupState) => string \| undefined) \| undefined`	CSS class applied to the element, or a function that returns a class based on the component's state.
`style`	`React.CSSProperties \| ((state: BaseUI.RadioGroupState) => React.CSSProperties \| undefined) \| undefined`	Style applied to the element, or a function that returns a style object based on the component's state.
`render`	`React.ReactElement<unknown, string \| React.JSXElementConstructor<any>> \| BaseUI.ComponentRenderFn<BaseUI.HTMLProps, BaseUI.RadioGroupState> \| undefined`	Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.

This component wraps Base UI radio-group for its behavior.