Radio button for selecting one option from a group.
import { Radio } from 'ui-lab-components/radio';import { Radio } from 'ui-lab-components/radio';
export default function Example() {
return (
<Radio.Group value="option-1">
<Radio.Item value="option-1" label="Option 1" />
<Radio.Item value="option-2" label="Option 2" />
</Radio.Group>
);
}
A simple radio button option with a label. Use this for single-choice selection in forms and settings.
import { Radio } from 'ui-lab-components/radio';
export default function Example() {
return (
<Radio value="option1" label="Select this option" />
);
}
Radio buttons with titles and descriptive text. Useful for plan selection, settings, or any choice that benefits from additional context.
'use client';
import { Radio } from 'ui-lab-components/radio';
export default function Example() {
return (
<Radio.Group value="pro">
<Radio.Item
value="starter"
label="Starter Plan"
description="Perfect for individuals and small projects. Includes 5GB storage and basic support."
/>
<Radio.Item
value="pro"
label="Pro Plan"
description="Ideal for growing teams. Includes 50GB storage, priority support, and advanced analytics."
/>
<Radio.Item
value="enterprise"
label="Enterprise Plan"
description="For large organizations. Unlimited storage, dedicated support, and custom integrations."
/>
</Radio.Group>
);
}
A minimal vertical list of selectable cards. Click anywhere on a card to focus and select its radio, or use the keyboard to move between options.
'use client';
import { Radio } from 'ui-lab-components/radio';
const options = [
{ value: 'all', label: 'All activity', description: 'Stay up to date with everything.' },
{ value: 'mentions', label: 'Mentions only', description: 'Just the conversations that need you.' },
{ value: 'none', label: 'Nothing for now', description: 'A little space to focus.' },
];
const cardStyles = {
item: 'items-start rounded-sm border border-background-700 p-3 hover:bg-background-900',
label: 'text-foreground-100',
description: 'text-sm text-foreground-400',
};
export default function Example() {
return (
<Radio.Group
value="mentions"
label="Notifications"
description="Choose what reaches you."
className="w-full max-w-sm"
styles={{ label: 'text-base text-foreground-100', description: 'text-sm text-foreground-400', group: 'mt-5 gap-3' }}
>
{options.map((option) => (
<Radio.Item key={option.value} {...option} styles={cardStyles} />
))}
</Radio.Group>
);
}
A delivery-method picker composed with Card and Radio. Details sit on the left and radios on the right, with whole-card selection and built-in keyboard navigation.
'use client';
import { Card } from 'ui-lab-components/card';
import { Radio } from 'ui-lab-components/radio';
const deliveryMethods = [
{ value: 'standard', label: 'Standard delivery', estimate: 'Arrives in 4–6 business days', price: 'Free' },
{ value: 'express', label: 'Express delivery', estimate: 'Arrives in 2–3 business days', price: '$8.00' },
{ value: 'next-day', label: 'Next-day delivery', estimate: 'Arrives the next business day', price: '$16.00' },
];
export default function Example() {
return (
<Radio.Group
value="standard"
label="Delivery method"
description="Choose how soon your order arrives."
className="w-full max-w-md"
styles={{ group: 'mt-4' }}
>
{deliveryMethods.map((method) => (
<Card key={method.value}>
<Radio.Item
value={method.value}
label={method.label}
description={`${method.estimate} · ${method.price}`}
styles={{ item: 'flex-row-reverse justify-between p-4' }}
/>
</Card>
))}
</Radio.Group>
);
}