Toggle

A toggle will let users activate or deactivate a control, like an on/off switch.

Component Status

Design

Up to date

React

Up to date

Flutter

Up to date

Introduction

The toggle component serves as a visual representation of a binary choice, providing users with a clear way to control settings, preferences, or switch between different views. With its ability to instantly communicate changes and offer immediate feedback, the toggle component greatly enhances usability and interactivity.

When to use

Forms

Can be used in tiles, data tables, modals, side panels, and in full page forms.

Settings

Used to change from one setting to another in a menu, page, or component. It often acts as an on/off switch.

null

The difference between a Toggle and a Checkbox is that a toggle will trigger a state change directly when you toggle it, while Checkbox is generally used for state marking, and work in conjunction with submitting.