Pluralsight Design System
INTRODUCTION
Install
Design assets
Contribute
Roadmap
CORE
Color
Motion
Spacing
Typography
COMPONENTS
Action Menu
Avatar
Badge
Banner
Breadcrumb
Button
Card
Checkbox
Circular Progress
Code
Date Picker
Dialog
Drawer
Dropdown
Errors
Form
Icon
Layout
Link
Radio
Row
Switch
Tab
Table
Tag
Text
Text Area
Text Input
Theme
Tooltip
View Toggle
PATTERNS
Iconography
Voice & tone

Switch
CHANGELOG

Install the component dependency:

Include a React component in your project:

PropTypes

Name
Value
Description
Default
checked
boolean
shows a toggled-on switch
false
color
orange | green
track color (from Switch.colors)
orange
disabled
boolean
standard input disable flag
false
error
boolean
error state flag
false
labelAlign
left | right
label position (from Switch.labelAligns)
right
size
small | large
switch size (from Switch.sizes)
large

In-app Example

There is no internal state for the switch component. The containing app will take care of how it maintains and changes the state of the Switch with the checked and onClick props.

Size

Switches come in two sizes.

Color

Switches come in two colors. Orange is default.

Label

Labels will provide additional context around the usage of the switch.

Disabled

Each switch may be displayed as disabled. Do not use disabled treatment for non-disabled switches.

Light theme

To specify the light theme, wrap your components in a Theme component.

Error

Error states are engaged with the error flag. This is useful when tags are used from within a form