RadioGroup

Group container for radio buttons with controlled state.

formselectiongroup

Import

import { RadioGroup } from "@/components/ui";

Basic Usage

RadioGroup Preview

Preferred contact method

Phone

SMS

Code

tsx

<RadioGroup
  name="size"
  options={[
    { value: "sm", label: "Small" },
    { value: "md", label: "Medium" },
    { value: "lg", label: "Large" },
  ]}
  defaultValue="md"
/>

Horizontal Layout

Display options in a row

1<RadioGroup
2  name="color"
3  orientation="horizontal"
4  options={[
5    { value: "red", label: "Red" },
6    { value: "green", label: "Green" },
7    { value: "blue", label: "Blue" },
8  ]}
9/>

With Descriptions

Add descriptions to options

1<RadioGroup
2  name="tier"
3  options={[
4    { value: "starter", label: "Starter", description: "Best for personal projects" },
5    { value: "pro", label: "Pro", description: "Best for growing teams" },
6    { value: "enterprise", label: "Enterprise", description: "Best for large organizations" },
7  ]}
8/>

Controlled State

Manage selection externally

1const [value, setValue] = useState("option1");
2
3return (
4  <RadioGroup
5    name="preference"
6    value={value}
7    onChange={setValue}
8    options={[
9      { value: "option1", label: "Option 1" },
10      { value: "option2", label: "Option 2" },
11      { value: "option3", label: "Option 3" },
12    ]}
13  />
14);

Ready to use this component?

Configure your app with the features you need and download production-ready code.

Start Configuring