Switch

Switch in Storybook

note

This component is being reworked. There will be a new version aligned with the latest guidelines in upcoming releases.

Overview

The switch is a component that alternates between two possible states: active and inactive. Auto-save, for example, can either be active or inactive for a given application. The setting is applied consistently throughout the experience.

Anatomy

The switch has a label with a handle and a track that changes color when the status is changed.

A switch consists of:

1. Label: text that provides additional clarification about the option or setting that the switch controls.
2. Track: horizontal path along which users slide the switch handle.
3. Handle: users slide the switch handle to the other side of the track to toggle the item on or off.

Best practices

• Use a switch when you need to toggle an application state between two options, for example, on/off and active/inactive.
• Ensure that switches take effect immediately and do not require additional action.
• Best used for
  • Changing the state of system functionalities, preferences, or views.
  • Presenting binary options.
  • Activating a change of state, not performing an action.
• Use a switch to replace two radio buttons or a single checkbox that allows the users to choose between two distinctly different, mutually exclusive states.
• Ensure that the switch component is implemented consistently within a given solution.

Interactions

Switches have enabled, disabled, focus, hover and active states.

• Enabled: Communicates to the user that the element is enabled for interaction (default).
• Disabled: Communicates to the user that the element is disabled and not interactive. The element is grayed out.
• Focus: Provides feedback indicating the user has highlighted the element, typically using an input method such as a keyboard or voice. The element is highlighted in the brand 1 color (HEX #A8DDF3).
• Hover: Indicates that the user has placed a cursor over the element.
• Active: Indicates that the user is clicking or tapping the element.

When users toggle the switch on, a checkmark appears within the track to indicate that the setting or option is activated.

UX writing considerations

• Labels should clearly communicate which option or setting the switch controls, for example, "Autosave."
• Do not include the text "on" or "off" within the graphic itself. The switch alone should be sufficient.
• Switches are a well-known selection control and generally don't require additional explanation. That is, you don't need to instruct users to "toggle" the switch.
• Tooltips can be used to provide further information regarding available options.

Accessibility

The Jutro Switch component is an interactive control that can exist in one of two states; 'on' or 'off'.

• Screen reader interaction: The switch is of type 'input' and also includes the aria role of 'switch'. It derives its accessible name from the value of the text label & includes this name as part of an aria-label attribute. Changing the value of the label in Storybook also changes the aria-label value. The aria-checked value toggles from 'true' to 'false' depending on the state of the element; this change is voiced by screen readers as 'on' and 'off' respectively.
• Keyboard interaction: The Switch component is keyboard-focusable. The SPACE and ENTER keys activate and deactivate it.
• Color: Textual elements have a contrast ratio above 4.5:1 against their background, as per WCAG 2.0 AA requirements.
• Zoom: All content is visible and functional up to & including a zoom factor of 200%.

This component has been validated to meet the WCAG 2.0 AAaccessibility guidelines. However, changes made by the content author can affect accessibility conformance.

• Ensure that the label text is meaningful and understandable.