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
{
"type": "toggle-group",
"selectionType": "single",
"items": [
{
"value": "left",
"label": "Left"
},
{
"value": "center",
"label": "Center"
},
{
"value": "right",
"label": "Right"
}
]
}Multiple Selection
Multiple Selection
{
"type": "toggle-group",
"selectionType": "multiple",
"items": [
{
"value": "bold",
"label": "Bold"
},
{
"value": "italic",
"label": "Italic"
},
{
"value": "underline",
"label": "Underline"
}
]
}With Labels
With Labels
{
"type": "single",
"items": [
{
"value": "list",
"icon": "list",
"label": "List"
},
{
"value": "grid",
"icon": "grid",
"label": "Grid"
},
{
"value": "table",
"icon": "table",
"label": "Table"
}
]
}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;
}