Main
 Installation Versioning Theming Typography Design tokens Schematics Migration guides
Components
 Accordion Actions panel AG grid Alert App Switcher Autocomplete Badge Breadcrumbs Button Button Group Button toggle Checkbox Clamped list Clamped text Code block Content panel Core Datepicker Description list Divider Dropdown Dynamic translation Empty state File upload Filter Bar Flag New Form field Highlight Icon Icon Button Icon Item Inline edit Input Layout flex Link List Markdown Modal Navbar Notification Center Overflow items Overlay Popover Progress bar Progress spinner Radio Resizer Scrollbar Search expandable Select Sidebar Sidepanel Skeleton Split button Splitter Table Tabs Tag Tag autocomplete Tag input Tag list Textarea Time range Timepicker Timezone Title Toast Toggle Tooltip Topbar Tree Tree select Username
Other
 Date formatter Filesize formatter Forms Number formatter Validation
Icons
Interface and examples language
English
Version
20.2.0
Toggle

State toggle button: on or off. For example, Wi-Fi is turned on or off on a phone.

Properties
Disabled state
Error
Indeterminate state

This state is used to reflect partial selection or uncertainty.

Loading
Content
Hint
Label on the right

The toggle is placed to the right of the field name and hint block.

The toggle can be placed to the right and on the same line after the label.

Recommendations
  • Use a toggle for instant switching of settings that do not require confirmation. For example, changes are applied immediately without a “Save” button. If saving requires submitting a form, use a checkbox.
  • Do not use a toggle if the choice options do not fit binary logic: on or off, yes or no.
Suggestions for improvement
If you found a mistake or want to improve the article, create an issue on GitHub.