Switch

Switches allow users to turn an individual option on or off. They are usually used to activate or deactivate a specific setting.

Install
npm install @pluralsight/ps-design-system-switch
Import
import Switch from '@pluralsight/ps-design-system-switch'

Examples

Sizes & Colors

Switches come in two sizes and two colors.

import React from 'react'
import Switch from '@pluralsight/ps-design-system-switch'

function Example() {
  return (
    <div className="example-grid--col-2">
      <Switch size={Switch.sizes.large} color={Switch.colors.blue} checked>
        Large blue
      </Switch>
      <Switch size={Switch.sizes.small} color={Switch.colors.blue} checked>
        Small blue
      </Switch>
      <Switch size={Switch.sizes.large} color={Switch.colors.green} checked>
        Large green
      </Switch>
      <Switch size={Switch.sizes.small} color={Switch.colors.green} checked>
        Small green
      </Switch>
    </div>
  )
}

export default Example

Label alignment

Labels will provide additional context around the usage of the switch and can be aligned to the left or right of the switch

import React from 'react'
import Switch from '@pluralsight/ps-design-system-switch'

function Example() {
  return (
    <div className="example-grid--col-2">
      <Switch
        size={Switch.sizes.large}
        color={Switch.colors.blue}
        checked
        labelAlign="right"
      >
        Large blue
      </Switch>
      <Switch
        size={Switch.sizes.small}
        color={Switch.colors.blue}
        checked
        labelAlign="right"
      >
        Small blue
      </Switch>
      <Switch
        size={Switch.sizes.large}
        color={Switch.colors.green}
        checked
        labelAlign="right"
      >
        Large green
      </Switch>
      <Switch
        size={Switch.sizes.small}
        color={Switch.colors.green}
        labelAlign="right"
        checked
      >
        Small green
      </Switch>
      <Switch
        size={Switch.sizes.large}
        color={Switch.colors.blue}
        labelAlign="left"
        checked
      >
        Large blue
      </Switch>
      <Switch
        size={Switch.sizes.small}
        color={Switch.colors.blue}
        labelAlign="left"
        checked
      >
        Small blue
      </Switch>
      <Switch
        size={Switch.sizes.large}
        color={Switch.colors.green}
        labelAlign="left"
        checked
      >
        Large blue
      </Switch>
      <Switch
        size={Switch.sizes.small}
        color={Switch.colors.green}
        labelAlign="left"
        checked
      >
        Small green
      </Switch>
    </div>
  )
}

export default Example

Disabled

import React from 'react'
import Switch from '@pluralsight/ps-design-system-switch'

function Example() {
  return (
    <div className="example-grid--col-2">
      <Switch
        size={Switch.sizes.large}
        color={Switch.colors.blue}
        checked
        disabled
      >
        Large blue
      </Switch>
      <Switch
        size={Switch.sizes.small}
        color={Switch.colors.blue}
        checked
        disabled
      >
        Small blue
      </Switch>
      <Switch
        size={Switch.sizes.large}
        color={Switch.colors.green}
        checked
        disabled
      >
        Large blue
      </Switch>
      <Switch
        size={Switch.sizes.small}
        color={Switch.colors.green}
        checked
        disabled
      >
        Small green
      </Switch>
    </div>
  )
}

export default Example

Error state

import React from 'react'
import Switch from '@pluralsight/ps-design-system-switch'

function Example() {
  return (
    <div className="example-grid--col-2">
      <Switch
        size={Switch.sizes.large}
        color={Switch.colors.blue}
        checked
        error
      >
        Large blue
      </Switch>
      <Switch
        size={Switch.sizes.small}
        color={Switch.colors.blue}
        checked
        error
      >
        Small blue
      </Switch>
      <Switch
        size={Switch.sizes.large}
        color={Switch.colors.green}
        checked
        error
      >
        Large blue
      </Switch>
      <Switch
        size={Switch.sizes.small}
        color={Switch.colors.green}
        checked
        error
      >
        Small green
      </Switch>
    </div>
  )
}

export default Example

Accessibility

WCAG 2.1 AA Compliance

100% axe-core tests

Manual audit

WAI-ARIA Patterns: Checkbox

Props

Name	Type	Description	Default
`checked`	`boolean`	shows a toggled-on switch	`false`
`color`	`blue \| green \| orange`	track color (from <code>Switch.colors</code>)	`blue`
`disabled`	`boolean`	standard input disable flag	`false`
`error`	`boolean`	error state flag	`false`
`labelAlign`	`left \| right`	label position (from <code>Switch.labelAligns</code>)	`right`
`size`	`small \| large`	label position (from <code>Switch.sizes</code>)	`large`