Components

Switch

Accessible
View on GitHub

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'
() => {
const [checked, setChecked] = useState(false);
const toggle = () => setChecked(!checked);
return (
<Box display="flex" justifyContent="center" alignItems="center">
<Label htmlFor="spike-alerts">Enable spike alerts?</Label>
<Switch id="spike-alerts" checked={checked} onClick={toggle} ml={300} />
</Box>
);
};

For asynchronous actions, Switch can be used with an intermediate loading state while you await a response.

import { Switch } from '@sproutsocial/racine'
() => {
const [checked, setChecked] = useState(false);
const [loading, setLoading] = useState(false);
const toggle = () => {
setTimeout(() => {
setLoading(false);
setChecked(!checked);
}, 2000);
setLoading(true);
};
return (
<div>
<Label htmlFor="spike-alerts">Enable all filter tags?</Label>
<Switch
id="spike-alerts"
loading={loading}
checked={checked}
onClick={toggle}
/>
</div>
);
};

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