ObjectUIComponentsDisclosure
Toggle Group
A group of toggle buttons where one or more can be selected
The Toggle Group component allows users to toggle between multiple options.
Basic Usage
Single Selection
Multiple Selection
Multiple Selection
With Labels
With Labels
Schema
interface ToggleGroupItem {
value: string;
icon?: string;
label?: string;
}
interface ToggleGroupSchema {
type: 'toggle-group';
type: 'single' | 'multiple'; // Selection mode
items: ToggleGroupItem[]; // Toggle items
value?: string | string[]; // Selected value(s)
variant?: 'default' | 'outline';
size?: 'sm' | 'default' | 'lg';
// Events
onValueChange?: string | ActionConfig;
// States
disabled?: boolean;
// Styling
className?: string;
}