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
Name | Type | Default | Description | Required? |
---|---|---|---|---|
onClick | (e: SyntheticEvent<HTMLButtonElement>, checked: boolean) => void | |||
checked | boolean | |||
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} | |
disabled | boolean | false | Disables interaction on component and applies disabled styles | |
name | string | |||
qa | Object |