Components

Switch

Switch enables a user to quickly toggle between two states.

Switch is similar to a radio group in function but is used for quickly toggling between binary actions. Switch must always be accompanied by a label, and follows the same keyboard workflow as a checkbox.

import { Switch } from '@sproutsocial/racine'

Properties

System props

System props apply standard sets of properties to a component that can be used to alter its appearance on the fly.

NameTypeDefaultDescriptionRequired?
onClicksignature
checkedboolean
Boolean for *checked* attribute
a11yLabelsObject{ on: "on", off: "off" }
Customizable object to pass in localized "On" and "Off" label text for screen readers {"on":ONTEXT,"off": OFFTEXT}
disabledbooleanfalse
Disables interaction on component and applies related styles
qaObject
Optional QA object
namestring
Name attribute, describing the purpose of this `Switch`, used for QA attribute