Radio Group

Radio group with optional label, descriptions, inline options, and error message.

Plan

Choose the plan that fits your project.

Starter

For small projects.

Pro

For growing teams.

Installation

bash

pnpm dlx shadcn@latest add @cs/radio-group

tsx

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

tsx

<RadioGroup name="plan" label="Plan" options={[{ value: "starter", label: "Starter" }, { value: "pro", label: "Pro" }]} />

Radio group with optional label, descriptions, inline options, and error message.

Name	Type	Default	Description
description	string	-	Supporting text displayed below the label.
error	string \| null	-	Validation error message for the group.
groupClassName	string	-	Additional classes applied to the radio group container.
itemClassName	string	-	Additional classes applied to every option rendered from `options`.
label	string	-	Label displayed above the radio group.
name	string	-	Form field name.
options	{ value: string; label: string; description?: string }[]	-	Radio button options. Alternatively, you can provide children.

A single radio option with an optional label and supporting text.

Name	Type	Default	Description
className	string	-	Additional classes applied to the option field wrapper.
description	string	-	Supporting text displayed below the label.
label	string	-	Label displayed next to the radio button.