RadioGroup

Forms

A single-choice group with a consistent label, description and error treatment.

Live preview

Plan

FreeBasics for personal projectsProMost features, unlimited projectsTeamCollaboration and roles

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { RadioGroup } from "@nphuonha/ui-kit";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<RadioGroup label="Plan" options={plans} defaultValue="pro" />

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
options	RadioOption[]	—	Value/label/description entries.
value	string	—	Controlled value.
defaultValue	string	—	Uncontrolled initial value.
onValueChange	(value: string) => void	—	Called when the selection changes.
label	ReactNode	—	Group label.
description	ReactNode	—	Group helper text.
error	ReactNode	—	Group error message.
orientation	"vertical" \| "horizontal"	"vertical"	Layout direction.