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

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