Radio Group

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

Option One

Option Two

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

Retro Option A

Retro Option B

Glass Option A

Glass Option B

Allowed Selection

Blocked State

Spaced row container 1

Spaced row container 2

Starter Pack$10/month

Pro Pack$30/month

Custom Emerald Fill

Custom Rose Fill

Notification Options

All system updates

Direct mentions only

Full AccessAllows read, write, edit, and full repository deletion capabilities.

Read OnlyAllows listing code files and branches without commit permissions.

Theme Customizer

Primary Theme Accent

Border Corner Radius

Glass Backdrop Blur8px

Export CSS Config

@theme {
  --radius: 0.5rem;
  --glass-blur: 8px;
}

Changes apply instantly to this documentation workspace.

Radio Group

Radio Group

Preview

Installation

All Variations

1. Default Style (Vertical List)

2. Horizontal Layout Group

3. Retro Neobrutalist Style

4. Glassmorphic Style

5. Disabled Group Item

6. Wide Padding Spacing List

7. Custom Selection Card Wrapper

8. Custom Accent Color Rings

9. Radio Group inside Bordered Wrapper

Notification Options

10. Label with Descriptions

Contributors

Theme Customizer