Radio Group
A set of checkable buttons where no more than one of the buttons can be checked at a time.
RadioGroup and Radio wrap Base UI's radio primitives with a flex column layout
and a built-in indicator; Radio also ships as RadioGroupItem.
Installation
npx shadcn@latest add @kosori/radio-groupExample
radio-group-example.tsx
import { Label } from '@/components/ui/label';
import { Radio, RadioGroup } from '@/components/ui/radio-group';
const RadioGroupExample = () => (
<RadioGroup aria-label='Notification method' defaultValue='r-1'>
<Label className='flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50'>
<Radio value='r-1' />
<div className='flex flex-col gap-1'>
<p>Email</p>
<p className='text-muted-foreground text-xs'>
Receive notifications via email.
</p>
</div>
</Label>
<Label className='flex items-start gap-2 rounded-lg border p-3 hover:bg-accent/50 has-data-checked:border-primary/48 has-data-checked:bg-accent/50'>
<Radio value='r-2' />
<div className='flex flex-col gap-1'>
<p>SMS</p>
<p className='text-muted-foreground text-xs'>
Receive notifications via text message.
</p>
</div>
</Label>
</RadioGroup>
);
export default RadioGroupExample;
Usage
import { Label } from '@/components/ui/label';
import { Radio, RadioGroup } from '@/components/ui/radio-group';
const RadioGroupDemo = () => (
<RadioGroup defaultValue='email'>
<Label className='flex items-center gap-2'>
<Radio value='email' />
Email
</Label>
<Label className='flex items-center gap-2'>
<Radio value='sms' />
SMS
</Label>
</RadioGroup>
);