How do I install the Vibe UI Radio Group component?

You can install Radio Group into your React or Next.js project using the Vibe UI CLI: run "npx vibe-ui-kit add radio-group" in your terminal.

Does Vibe UI Radio Group support Tailwind CSS v4?

Yes, Vibe UI natively supports both modern Tailwind CSS v4 (@theme directives) and Tailwind CSS v3 with zero configuration.

Is the Vibe UI Radio Group component accessible?

Yes, Vibe UI primitives are built upon WAI-ARIA compliant Radix UI primitives with full keyboard navigation and screen reader support.

Vibe UI

Initializing Vibe UI System...

Vibe UI

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one button can be checked at a time.

Radio Group

A set of checkable buttons—known as radio buttons—where no more than one button can be checked at a time.

Preview

Option One

Option Two

Installation

pnpm dlx vibe-ui-kit@latest add radio-group label

💡 Vibe UI Component Dependencies: This component requires other components to work correctlyPlease make sure you also install these Vibe UI component dependencies: label

Preset Variations

Explore the different preset variants of the Radio Group component, supporting Default, Glassmorphic, Retro Neobrutalist, Neon Glow, and Cyberpunk styling configurations.

Props

RadioGroupItem

Prop	Type	Default	Description
value	string	-	The unique value of the radio item within the radio group.
variant	'default' \| 'retro' \| 'glass' \| 'glow' \| 'cyberpunk'	'default'	The visual preset style variant of the radio button.
disabled	boolean	false	When true, prevents the user from interacting with the radio item.