Toggle component in Office UI Fabric
Toggles represent a physical switch to turn things on or off. Use Toggles to present two mutually exclusive options (for example, on and off), where choosing an option results in an immediate action.
Example: Toggle in a task pane
Best Practices
| Do | Don't |
|---|---|
| Use Toggles for binary settings when changes are immediately applied (see image below). | Don’t use Toggles if users must perform an extra step before changes take effect (see image below). |
 |
 |
| Only replace the On and Off labels if there are more specific labels to use for a setting. Use short (3-4 character) labels that represent binary opposites. |
Variants
| Variation | Description | Example |
|---|---|---|
| Enabled and checked | Use when the toggled state is active. |  |
| Enabled and unchecked | Use when the toggled state is inactive. |  |
| Disabled and checked | Use when the active state cannot be changed. |  |
| Disabled and unchecked | Use when the inactive state cannot be changed. |  |
Implementation
For details, see Toggle and Getting started with Fabric React code sample.