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
The third item sets disabled: true, which the renderer forwards to that toggle
only — the rest of the group stays interactive.
With Labels
Schema
interface ToggleGroupItem {
value: string;
label: string;
disabled?: boolean; // Disables this item only
}
interface ToggleGroupSchema {
type: 'toggle-group';
selectionType?: 'single' | 'multiple'; // Selection mode
items: ToggleGroupItem[]; // Toggle items
value?: string | string[]; // Selected value(s)
variant?: 'default' | 'outline';
size?: 'sm' | 'default' | 'lg';
// Events
onValueChange?: (value: string | string[]) => void;
// States
disabled?: boolean | string | { dialect?: string; source: string }; // boolean, predicate expression, or CEL envelope
// Styling
className?: string;
}