NordSecurity.Design

Toggle

Overview

Toggle allow users to toggle between two mutually exclusive states.

When to use

Use a toggle for immediate on or off actions that apply instantly. It is best for system settings or preferences that do not require confirmation.

When not to use

Do not use a toggle for multi step actions, destructive actions, or anything that requires saving, confirmation, or additional context. Use a checkbox or button instead.

Anatomy

  1. Toggle
  2. Knob
  3. Knob Icon

Variants & States

States

The Toggle component has the two following states:

  • Checked=true: When the toggle is in the active state.
  • Checked=false: When the toggle is in the inactive state.

Accessibility

For better accessibility the Toggle component has built in icons that make it easier to convey information about the state without overlying on color alone. These icons should be always included and not hidden.

Internationalization

For RTL (right-to-left) languages there are no special adjustments made.

Accessibility

Accessibility

For better accessibility the Toggle component has built in icons that make it easier to convey information about the state without overlying on color alone. These icons should be always included and not hidden.

Properties

Name Type Values Description
checked Boolean true
false		 Controls if the Toggle is displayed checked or unchecked
id String ""

Usage Guidelines

DoUse the Toggle component when you want users to be able to switch between two mutually exclusive states instantly
Don’tDon't use the Toggle component for more than two mutually exclusive states.
Don’tDon't use the Toggle component when a checkbox or radio button is more appropriate for selecting options from a list.
Don’tDon't display the Toggle component without clear labels or visual cues for the states being toggled.
Don’tDon't use the Toggle component for critical actions or irreversible operations without appropriate confirmation mechanisms.
Don’tDon't require users to click a button to apply or save the setting of a toggle.
Don’tChecked=true: When the toggle is in the active state.
Don’tChecked=false: When the toggle is in the inactive state.

Content Guidelines

We use toggles for binary settings that take effect immediately, such as turning a feature on or off.

Voice and tone

We sound supportive and factual, not promotional.

  • We pair labels with toggles to describe what the feature does in its “on” state.
  • We use verbs when the action is clearest that way, like Allow or Show.
  • We use nouns when the feature itself is the focus, like Malware scanner.
  • We can use subtext for extra context if the label alone is not clear.
  • We keep labels short, ideally one to three words.
  • We use plain language that users recognize.
  • Labels do not need end punctuation.
  • For labels, we use sentence case.
DoVulnerability scanner — Detects security weaknesses in your apps that malicious actors could use to steal your private data.
Don’tEnable vulnerability scanner

Accessibility

  • We describe both states clearly for screen readers.
  • Screen readers announce the label, control type, and current state. Depending on the platform, a toggle may be announced as a “switch,” “toggle switch,” or “toggle button.”
DoPost-quantum encryption. Toggle switch. On/Off.
Don’tPost-quantum encryption.