Toggle Group
Provides a shared state to a series of toggle buttons.
Toggle Group wraps the Base UI Toggle
Group primitive, shares
size and variant with its Items through context, and marks itself with
data-slot.
Installation
npx shadcn@latest add @kosori/toggle-groupExample
toggle-group-example.tsx
import { IconBold, IconItalic, IconUnderline } from '@tabler/icons-react';
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
const ToggleGroupExample = () => (
<ToggleGroup defaultValue={['bold']}>
<ToggleGroupItem aria-label='Toggle bold' value='bold'>
<IconBold />
</ToggleGroupItem>
<ToggleGroupItem aria-label='Toggle italic' value='italic'>
<IconItalic />
</ToggleGroupItem>
<ToggleGroupItem aria-label='Toggle underline' value='underline'>
<IconUnderline />
</ToggleGroupItem>
</ToggleGroup>
);
export default ToggleGroupExample;
Usage
import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
const ToggleGroupDemo = () => (
<ToggleGroup defaultValue={['bold']}>
<ToggleGroupItem aria-label='Toggle bold' value='bold'>
B
</ToggleGroupItem>
<ToggleGroupItem aria-label='Toggle italic' value='italic'>
I
</ToggleGroupItem>
</ToggleGroup>
);