Switch

COMPONENT GUIDE

Explore behaviors before defining the interface.

Quick guide for designers

Always consider the context of the application, even when the guidance follows a standard pattern. Interaction design documents intent. Behavior must be verified in the implementation.

When to use

Use to turn a setting on or off, usually with immediate effect.

What to draw

Show a stable label, on and off states, and visible focus.

How it behaves

Click, touch, or Space toggles between two states. This component has no mixed state.

What to document in Figma

Record the effect of the change and when it takes effect. The new state needs to be communicated.

How to review

Check whether the purpose and states are clear on small and large screens and with zoom. Verify documented behavior in the implementation, including keyboard and screen reader use where applicable.

Full guidance

Interaction Design

Questions to ask when designing interactive components of type Switch.

Important:
Depending on the context in which you build your components, there may be further questions, and some listed here may not be necessary. Assess each case individually.

Designing for "no interaction"

Before interacting, can you tell that the component toggles between on and off?
Does the label describe the controlled setting without relying solely on state?
Is the current state visually clear?

Designing for mouse use (any pointing device)

Is there visual feedback on hover?
Does clicking the control or label immediately toggle the state?
Is the state change visually clear?

Designing for gesture use

Does the touch target include the label when possible?
Does tapping toggle the state between on and off?
Is the touch area comfortable?

Designing for keyboard use (any non-pointing device)

Is there visible focus on the switch?
Can the state be toggled with SPACE?
Does navigation with TAB follow the expected flow?

Designing for screen reader use

Is the switch label announced?
Is the switch role announced when used?
Is the on or off state announced?
Is the state change perceptible after activation?

Interaction methods

Possible interaction methods for components of type Switch.

Important:
Only the main methods are listed here. Custom components require further study.

Mouse interaction (any pointing device)

Clicking the switch toggles between on and off.
Clicking the label should toggle the state when it is associated with the control.
The action usually takes effect immediately, without a confirmation button.

Keyboard interaction (any non-pointing device)

TAB moves focus to the switch.
SPACE toggles the state.
ENTER may work in custom implementations but should not replace support for Space.

Keyboard (or gesture) interaction + screen reader

The component should expose its name, role, and state.
The state must be binary, remaining on/off without a mixed state.
The change should be announced through the new state.

Gherkin

BDD (Behavior-Driven Development) methodology focusing on three pillars: User Stories, Acceptance Criteria, and Gherkin Syntax (Given, When, Then).

Scenario: Given that I am on a page containing a switch

Keyboard navigation

WHEN I use the Tab key to move focus to a switch
The focus I SEE is strongly indicated visually
THEN, when I use the Space
I SEE the switch toggle between on and off

Desktop screen reader

When I use a screen reader on a computer (NVDA, JAWS, VoiceOver) and move focus to the component
- I HEAR the switch's label and purpose.
- I HEAR that the component is a switch.
- I HEAR its current state, such as on or off.
THEN, when I activate or change the component
I HEAR or perceive that its corresponding state, value, content, or action has been updated.

Mobile screen reader

WHEN I use a screen reader on a phone (TalkBack, VoiceOver) and swipe to focus the component, the following happens:
- I HEAR the switch's label and purpose.
- I HEAR that the component is a switch.
- I HEAR its current state, such as on or off.
THEN, when I double-tap or use the appropriate gesture to activate the component
I HEAR or perceive that its corresponding state, value, content, or action has been updated.

Considerations

Considerations for components of type Switch.

Use switches for binary settings that take effect immediately.
If the action requires confirmation, a checkbox or another pattern may be more appropriate.
Do not change the label in a way that changes the accessible name and makes the announced state confusing.

References

Additional references for components of type Switch.

Important:
Most references are on the course platform alongside the lessons cited in this material.

Disclaimer:
The links listed here are a curated collection of references where you can find implemented components, rather than recommendations. There is no unified implementation format and no guarantee that these links follow every design pattern. Direct questions to the teams responsible for the linked materials. Before copying a model, remember that all materials are constantly updated and that patterns, particularly proprietary ones, may change.