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"><Switchsize={Switch.sizes.large}color={Switch.colors.blue}checkedlabelAlign="right">Large blue</Switch><Switchsize={Switch.sizes.small}color={Switch.colors.blue}checkedlabelAlign="right">Small blue</Switch><Switchsize={Switch.sizes.large}color={Switch.colors.green}checkedlabelAlign="right">Large green</Switch><Switchsize={Switch.sizes.small}color={Switch.colors.green}labelAlign="right"checked>Small green</Switch><Switchsize={Switch.sizes.large}color={Switch.colors.blue}labelAlign="left"checked>Large blue</Switch><Switchsize={Switch.sizes.small}color={Switch.colors.blue}labelAlign="left"checked>Small blue</Switch><Switchsize={Switch.sizes.large}color={Switch.colors.green}labelAlign="left"checked>Large blue</Switch><Switchsize={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"><Switchsize={Switch.sizes.large}color={Switch.colors.blue}checkeddisabled>Large blue</Switch><Switchsize={Switch.sizes.small}color={Switch.colors.blue}checkeddisabled>Small blue</Switch><Switchsize={Switch.sizes.large}color={Switch.colors.green}checkeddisabled>Large blue</Switch><Switchsize={Switch.sizes.small}color={Switch.colors.green}checkeddisabled>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"><Switchsize={Switch.sizes.large}color={Switch.colors.blue}checkederror>Large blue</Switch><Switchsize={Switch.sizes.small}color={Switch.colors.blue}checkederror>Small blue</Switch><Switchsize={Switch.sizes.large}color={Switch.colors.green}checkederror>Large blue</Switch><Switchsize={Switch.sizes.small}color={Switch.colors.green}checkederror>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 |
| track color (from <code>Switch.colors</code>) | blue |
disabled | boolean | standard input disable flag | false |
error | boolean | error state flag | false |
labelAlign |
| label position (from <code>Switch.labelAligns</code>) | right |
size |
| label position (from <code>Switch.sizes</code>) | large |