Radio Groups

Lets users select only one option from a predefined set. Commonly used for preferences, settings, or form inputs.

Default

Success

Danger

Warning

Installation

npx shadcn@latest add https://display-ui.vercel.app/r/RadioGroups

Usage

import { RadioGroup, RadioItem } from "@/components/display-ui/RadioGroups"

<RadioGroup className="h-screen flex flex-col justify-center items-center gap-8">
  <RadioItem value="default" />
  <RadioItem value="success" variant="success" />
  <RadioItem value="danger" variant="danger" />
  <RadioItem value="warning" variant="warning" />
</RadioGroup>

API

RadioGroup Props

For RadioGroup Component

Attribute	Type	Description	Default
children	`ReactNode \| ReactNode[]`	Radio items rendered inside the group. Typically composed of RadioItem components.	-
className	`string`	Additional CSS classes to customize the radio group container styling.	-

For RadioItem Component

Attribute	Type	Description	Default
variant	`"default" \| "success" \| "danger" \| "warning"`	Controls the accent color of the radio input.	"default"
className	`string`	Additional CSS classes to customize the radio input styling.	-

Radio Groups

Installation

Usage

API

RadioGroup Props

Examples

Default

Warning

Success

Danger

Credits

On this page