Switch

The Switch component allows users to toggle between validity for a condition.

Examples

Select brand:

FinnTori

Usage

Design Guidelines

See Figma: Warp - Components / Switch

Questions?

Feel free to ask any questions on usage in the Warp DS Slack channel: #nmp-warp-design-system

Frameworks

Import

import { Switch } from "@warp-ds/react";

Syntax

  <Switch
    value={value}
    onClick={() => setValue(!value)}
    aria-label="Toggle switch"
  />

Accessibility

The Switch needs either aria-label or aria-labelledby to be accessible to screen readers.

Disabled property

There is no visual styling to a disabled button. It is recommended to display a message to the user, for example a modal or toast, stating why the user cannot toggle the switch.

Props

Required props

name	type	default	notes
value	boolean		The value of the switch.

Optional Props

name	type	default	notes
id	string	false	The unique identifier.
aria-label	string	false	Defines a string value that labels the current element. Must be set if aria-labelledby is not defined.
aria-labelledby	string		Identifies the element (or elements) that labels the current element. Must be set if aria-label is not defined.

Events

name	when
onClick	() => void		Handler for when the Switch is clicked.