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
  • 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