Radio Group

An animated and accessible radio group component where only one option can be selected at a time.

Option 1

Option 2

Option 3

Install

pnpm dlx shadcn@latest add https://www.katestroyui.com/r/radio-group

Usage

1import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
2import React from "react";
3
4export function Example() {
5  const [value, setValue] = React.useState("option1");
6  return (
7    <RadioGroup value={value} onValueChange={setValue}>
8      <RadioGroupItem value="option1">Option 1</RadioGroupItem>
9      <RadioGroupItem value="option2">Option 2</RadioGroupItem>
10      <RadioGroupItem value="option3">Option 3</RadioGroupItem>
11    </RadioGroup>
12  );
13}

Props

Prop	Type	Description	Default
value	string	Selected radio value	-
onValueChange	(value: string) => void	Called when selection changes	-
children	React.ReactNode	RadioGroupItem components	-
className	string	Extra CSS classes	-