Active theme set to LightDarkLight high contrastDark high contrast and saved in preferences.
Copied to clipboard.
Error submitting your feedback! Please try again.

Toggle New

Toggle switch gives control over a feature or option that can be turned on or off. If a physical switch would work for the action, a toggle is probably the best component to use.

Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
Edit in CodePen
Open in new window
View RTL
<nord-toggle checked label="Checked toggle" value="Value"></nord-toggle>
<nord-toggle label="Unchecked" value="Value"></nord-toggle>



Controls whether the toggle is checked or not.


Controls whether the contents are displayed in reverse order, putting the label before the toggle.


The size of the toggle switch.

"s" | "m" | "l""m"

Label for the input.


Optional hint text to be displayed with the input. Alternatively use the hint slot.

string | undefinedundefined

Visually hide the label, but still show it to assistive technologies like screen readers.


Placeholder text to display within the input.

string | undefinedundefined

Optional error to be shown with the input. Alternatively use the error slot.

string | undefinedundefined

Determines whether the input is required or not. An input marked as required will be announced as such to users of assistive technology. When using this property you need to also set “novalidate” attribute on a form element to prevent browser from displaying its own validation errors.


Makes the component disabled. This prevents users from being able to interact with the component, and conveys its inactive state to assistive technologies.


The name of the form component.

string | undefinedundefined

The value of the form component.




Fired as the user types into the input.


Fired whenever the input's value is changed via user interaction.



Slot nameDescription
labelUse when a label requires more than plain text.
hintOptional slot that holds hint text for the input.
errorOptional slot that holds error text for the input.


Method nameParametersDescription
focus(options?: FocusOptions) => voidoptions: An object which controls aspects of the focusing process.
Programmatically move focus to the component.
blur() => voidN/AProgrammatically remove focus from the component.
click() => voidN/AProgrammatically simulates a click on the component.

Usage #

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Do #

  • Use toggles when your intent is to turn something on or off instantly.
  • Use for any feature or option that can be turned on or off.
  • If a physical switch would work for the action, the toggle is probably the best component to use.
  • Use for making it possible to choose one or more options from a limited number of options.

Don’t #

  • Toggles should never require users to click a button to apply or save the setting.
  • Avoid using when you have more than 10 options to choose from.
  • Don’t change the selection of another toggle when another one is clicked. Only exception is when a toggle is used to make a bulk selection of multiple items.

Content guidelines #

Toggle labels should be clear, accurate and predictable. It should be possible for the user to understand what they are selecting:

User settings
Option 1

When writing toggle labels, always write them in sentence case, not title case. The first word should be capitalized and the rest lowercase (unless a proper noun):

User settings
User Settings

Avoid ending in punctuation if it’s a single sentence, word, or a fragment:

Show dashboard
Show dashboard.

Do not use commas or semicolons at the end of each line



For integration guidelines, please see Web Components documentation. This documentation explains how to implement and use Nord Web Components across different technologies such as Vue.js, React, or Vanilla JavaScript.

Integration Guidelines


Nord provides a lightweight solution for localizing its components. Not all components need localizing, as for the most part snippets of text are set per instance. For full localization guidelines, please see Localization documentation.

Localization Guidelines


If you experience any issues while using Nord Web Components, please head over to the Support page for more guidelines and ways to contact us.

Was this page helpful?

Send feedback

We use this feedback to improve our documentation.