Switch

Examples

Sizes & Colors

Switches come in two sizes and two colors.

Large blue

Small blue

Large green

Small green

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

Large blue

Small blue

Large blue

Small green

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

Large blue

Small blue

Large blue

Small green

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

Usage & Types

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

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`