ObjectUIObjectUI
ComponentsForm

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

Variants

Default

Outline

Sizes

Toggle Sizes

States

Pressed State

Disabled State

Schema

(Schema documentation temporarily disabled)

Examples

With Icons

Settings Toggles

In a Settings Panel

Settings Example

Preferences
Email notifications
Push notifications
SMS notifications

Toolbar Toggles

Text Formatting

File Upload

Modern file upload component with drag-and-drop support

Container

Centered content container with max-width

On this page

Basic UsageVariantsSizesStatesSchemaExamplesWith IconsIn a Settings PanelToolbar Toggles