Toggle Group
A set of toggle buttons that allows single or multiple selections.
'use client';
import {
ToggleGroup,
ToggleGroupItem,
} from '@/components/ui/toggle-group';
import { AlignCenter, AlignLeft, AlignRight } from 'lucide-react';
export function ToggleGroupDefault() {
return (
<ToggleGroup aria-label='Text alignment'>
<ToggleGroupItem value='left' aria-label='Align left'>
<AlignLeft />
</ToggleGroupItem>
<ToggleGroupItem value='center' aria-label='Align center'>
<AlignCenter />
</ToggleGroupItem>
<ToggleGroupItem value='right' aria-label='Align right'>
<AlignRight />
</ToggleGroupItem>
</ToggleGroup>
);
}
Installation
Usage
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group"<ToggleGroup defaultValue="center">
<ToggleGroupItem value="left">Left</ToggleGroupItem>
<ToggleGroupItem value="center">Center</ToggleGroupItem>
<ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>Examples
Multiple
Use multiple to allow multiple items to be selected.
'use client';
import {
ToggleGroup,
ToggleGroupItem,
} from '@/components/ui/toggle-group';
import { Bold, Italic, Underline } from 'lucide-react';
export function ToggleGroupMultiple() {
return (
<ToggleGroup multiple aria-label='Text formatting'>
<ToggleGroupItem value='bold' aria-label='Toggle bold'>
<Bold />
</ToggleGroupItem>
<ToggleGroupItem value='italic' aria-label='Toggle italic'>
<Italic />
</ToggleGroupItem>
<ToggleGroupItem value='underline' aria-label='Toggle underline'>
<Underline />
</ToggleGroupItem>
</ToggleGroup>
);
}