Checkbox Group
A group of checkboxes that shares one value and one disabled state.
CheckboxGroup wraps Base UI's checkbox group and stacks its checkboxes in a flex
column; a checkbox joins the group through its value and marks itself with
data-slot.
Installation
npx shadcn@latest add @kosori/checkbox-groupExample
checkbox-group-example.tsx
import { Checkbox } from '@/components/ui/checkbox';
import { CheckboxGroup } from '@/components/ui/checkbox-group';
import { Label } from '@/components/ui/label';
const CheckboxGroupExample = () => (
<CheckboxGroup aria-label='Select frameworks' defaultValue={['next']}>
<Label>
<Checkbox value='next' />
Next.js
</Label>
<Label>
<Checkbox value='vite' />
Vite
</Label>
<Label>
<Checkbox value='astro' />
Astro
</Label>
</CheckboxGroup>
);
export default CheckboxGroupExample;
Usage
import { Checkbox } from '@/components/ui/checkbox';
import { CheckboxGroup } from '@/components/ui/checkbox-group';
import { Label } from '@/components/ui/label';
const CheckboxGroupDemo = () => (
<CheckboxGroup defaultValue={['next']}>
<Label>
<Checkbox value='next' />
Next.js
</Label>
<Label>
<Checkbox value='vite' />
Vite
</Label>
</CheckboxGroup>
);