Switch

We use switches to allow users to choose between two mutually exclusive choices in the same line. This is often associated with enabling vs. disabling.
Demo and Developer GuidelinesFigma Component

Anatomy

Display your component, and add number markups provied below. If your component has multiple types, only show one. Use this paragraph above to describe what elements the user can and cannot change in the component.

Label

Switch labels are sentence case without punctuation unless it’s a proper noun or a user-inputted label.

Character count limit: 30

Refer to the label instructions for Checkboxes for more best practices.

Types

States

Specifications

Padding

Standard Padding
Styling