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.

Switch can be used in a or you can add a label by using:

  • aria-label
  • aria-labelledby={id of text on the page that labels the Switch}>
import { Switch } from '@sproutsocial/racine'

Properties

NameTypeDefaultDescriptionRequired?
onClick(e: SyntheticEvent<HTMLButtonElement>, checked: boolean) => void
checkedboolean
a11yLabels{ on: string, off: string }{ 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 disabled styles
namestring
qaObject