RadioGroup
Single-selection control for mutually exclusive options with multiple sizes
Overview
The RadioGroup component provides a set of mutually exclusive options where users can select exactly one choice. It supports multiple sizes, keyboard navigation, and flexible layouts with full accessibility support.
Import
import { RadioGroup } from "@px-ui/core";Usage
<RadioGroup.Group defaultValue="comfortable">
<div className="flex items-center gap-2">
<RadioGroup.Item value="default" id="default" />
<label htmlFor="default">Default</label>
</div>
<div className="flex items-center gap-2">
<RadioGroup.Item value="comfortable" id="comfortable" />
<label htmlFor="comfortable">Comfortable</label>
</div>
<div className="flex items-center gap-2">
<RadioGroup.Item value="compact" id="compact" />
<label htmlFor="compact">Compact</label>
</div>
</RadioGroup.Group>Examples
Sizes
The RadioGroup.Item component supports three size variants.
<RadioGroup.Item value="sm" id="size-sm" size="sm" />
<RadioGroup.Item value="default" id="size-default" size="default" />
<RadioGroup.Item value="lg" id="size-lg" size="lg" />With Descriptions
Radio items can be paired with labels and descriptions for better context.
Pay with your credit or debit card
Pay securely with your PayPal account
Transfer directly from your bank account
<RadioGroup.Group defaultValue="card">
<div className="flex items-start gap-3">
<RadioGroup.Item value="card" id="payment-card" className="mt-0.5" />
<div className="flex flex-col gap-1">
<label htmlFor="payment-card">Credit Card</label>
<p>Pay with your credit or debit card</p>
</div>
</div>
{/* More options... */}
</RadioGroup.Group>Horizontal Layout
Override the default vertical layout by applying flex-row to the Group component.
<RadioGroup.Group defaultValue="email" className="flex-row flex-wrap">
<div className="flex items-center gap-2">
<RadioGroup.Item value="email" id="contact-email" />
<label htmlFor="contact-email">Email</label>
</div>
{/* More options... */}
</RadioGroup.Group>Anatomy
Components that make up the RadioGroup:
RadioGroup.Group
The container component that manages the radio group state.
Custom Props:
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes. Default layout is flex flex-col gap-3 |
Inherited Props: Inherits all props from Base UI RadioGroup including value, defaultValue, onValueChange, disabled, etc.
RadioGroup.Item
Individual radio button within the group.
Custom Props:
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "default" | "default" | Visual style variant |
size | "default" | "sm" | "lg" | "default" | Size of the radio button |
className | string | - | Additional CSS classes |
Inherited Props: Inherits all props from Base UI Radio.Root including value, disabled, etc.
API Reference
See the Anatomy section above for detailed prop information for each component.