Radio Component

A flexible radio button that supports traditional single-select flows, optional multi-select mode, and toggleable behavior while staying visually consistent with the design system.

Overview

The Radio component provides:

• Clickable, keyboard-friendly controls for single selection
• Optional multi-select mode that behaves like checkboxes
• Toggle support so users can deselect an option by clicking it again
• Variant-based styling that matches other components
• Slots for custom icons/labels when you need advanced visuals

When to Use

Use the Radio component when you need to:

• Collect a single answer from a short list of mutually exclusive options
• Offer a compact multi-select alternative to checkboxes
• Present tiered pricing, plan, or status pickers with clear affordances
• Reuse the same trigger visuals across dropdowns/menus by leveraging the slots

Key Features

• Multiple Sizes – xs through xl to match different density requirements.
• Variants – Built-in classes such as default and success for consistent colors.
• Toggle Mode – Enable toggle to let users deselect an already selected value.
• Multi-Select – Set multiple on any radio to treat selections as an array while keeping the same UI.
• Custom Icons & Labels – Override via icon and label slots for advanced visuals (ratings, avatars, etc.).
• Disabled & Readonly – Lock down interaction while preserving layout and state cues.

API Reference →

View Code →