ObjectUIComponentsForm
Toggle
Two-state button for toggling options on and off
The Toggle component is a button that can be toggled between on and off states, useful for settings and preferences.
Basic Usage
Simple Toggle
{
"type": "toggle",
"label": "Toggle"
}Variants
Default
{
"type": "toggle",
"label": "Default",
"variant": "default"
}Outline
{
"type": "toggle",
"label": "Outline",
"variant": "outline"
}Sizes
Toggle Sizes
{
"type": "flex",
"gap": 2,
"align": "center",
"children": [
{
"type": "toggle",
"label": "Small",
"size": "sm"
},
{
"type": "toggle",
"label": "Default",
"size": "default"
},
{
"type": "toggle",
"label": "Large",
"size": "lg"
}
]
}States
Pressed State
{
"type": "toggle",
"label": "Pressed",
"pressed": true
}Disabled State
{
"type": "toggle",
"label": "Disabled",
"disabled": true
}Schema
(Schema documentation temporarily disabled)
Examples
With Icons
Settings Toggles
{
"type": "flex",
"gap": 2,
"children": [
{
"type": "toggle",
"label": "🔔 Notifications",
"variant": "outline"
},
{
"type": "toggle",
"label": "🌙 Dark Mode",
"variant": "outline"
},
{
"type": "toggle",
"label": "🔊 Sound",
"variant": "outline"
}
]
}In a Settings Panel
Settings Example
{
"type": "div",
"className": "max-w-md p-6 border rounded-lg space-y-4",
"children": [
{
"type": "text",
"content": "Preferences",
"className": "text-lg font-semibold mb-4"
},
{
"type": "flex",
"justify": "between",
"align": "center",
"className": "py-2",
"children": [
{
"type": "text",
"content": "Email notifications",
"className": "text-sm"
},
{
"type": "toggle",
"ariaLabel": "Email notifications"
}
]
},
{
"type": "flex",
"justify": "between",
"align": "center",
"className": "py-2",
"children": [
{
"type": "text",
"content": "Push notifications",
"className": "text-sm"
},
{
"type": "toggle",
"ariaLabel": "Push notifications",
"pressed": true
}
]
},
{
"type": "flex",
"justify": "between",
"align": "center",
"className": "py-2",
"children": [
{
"type": "text",
"content": "SMS notifications",
"className": "text-sm"
},
{
"type": "toggle",
"ariaLabel": "SMS notifications"
}
]
}
]
}Toolbar Toggles
Text Formatting
{
"type": "flex",
"gap": 1,
"className": "p-2 bg-muted rounded-lg",
"children": [
{
"type": "toggle",
"label": "B",
"size": "sm",
"variant": "outline",
"ariaLabel": "Bold"
},
{
"type": "toggle",
"label": "I",
"size": "sm",
"variant": "outline",
"ariaLabel": "Italic"
},
{
"type": "toggle",
"label": "U",
"size": "sm",
"variant": "outline",
"ariaLabel": "Underline"
}
]
}