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 or off), where choosing an option results in an immediate action.

Example: Toggle in a task pane

An image showing the Toggle

Best practices

Do Don't
Use toggles for binary settings when changes are immediately applied.

Do Toggle example
Don’t use toggles if users must perform an extra step before changes take effect.

Don't Toggle example
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 checked image
Enabled and unchecked Use when the toggled state is inactive. Enabled and unchecked image
Disabled and checked Use when the active state cannot be changed. Disabled and checked image
Disabled and unchecked Use when the inactive state cannot be changed. Disabled and unchecked image

Implementation

For details, see Toggle and Getting started with Fabric React code sample.

See also