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
checkedbooleanshows a toggled-on switchfalse
color
blue | green | orange
track color (from <code>Switch.colors</code>)blue
disabledbooleanstandard input disable flagfalse
errorbooleanerror state flagfalse
labelAlign
left | right
label position (from <code>Switch.labelAligns</code>)right
size
small | large
label position (from <code>Switch.sizes</code>)large