Radio Group

Radio button group for selecting a single option from a list. Supports descriptions, multiple sizes, and horizontal/vertical orientation.

Installation

npm install @trinkui/react

import { RadioGroup } from "@trinkui/react";

Select a plan

FreeUp to 5 projectsProUnlimited projectsEnterpriseCustom limits

Orientation

LeftCenterRight

Disabled group

Option AOption B

Prop	Type	Default	Description
optionsrequired	RadioOption[]	—	Array of radio options to render
value	string	—	Controlled selected value
defaultValue	string	—	Initial uncontrolled value
onChange	(value: string) => void	—	Callback when selection changes
label	string	—	Group label rendered as a fieldset legend
orientation	"vertical" \| "horizontal"	"vertical"	Layout direction of the radio items
size	"sm" \| "md" \| "lg"	"md"	Size of the radio indicators and text
disabled	boolean	false	Disable all radio options
className	string	—	Additional CSS classes

Prop	Type	Default	Description
labelrequired	string	—	Display label for the option
valuerequired	string	—	Unique value for the option
description	string	—	Secondary description text
disabled	boolean	false	Disable this individual option

Wraps options in a <fieldset> with a <legend> for the group label.
Uses native <input type="radio"> elements for full keyboard and screen reader support.
Arrow keys navigate between options within the group.
The checked state is conveyed via the native checked attribute.
Disabled options are excluded from the tab order.