Switch

The Switch component allows users to toggle between two states.

ReactreleasedVuereleasedAndroidreleasediOSreleased

Examples

Example theme:

DBA lightFinn lightTori lightBlocket lightNeutral lightVend lightDBA darkFinn darkTori darkBlocket darkNeutral darkVend dark

Usage

Design Guidelines

See Figma: Warp - Components / Switch

Framework(s)

Import

You can import the component like so:

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

or import it individually to optimize your JS bundle size by adding only the components you need:

import { Switch } from '@warp-ds/react/components/switch';

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.
disabled	boolean	false	Whether the switch is disabled.

Events

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

Questions?

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