@paprika/switch
Description
Switch component for turning a setting on or off.
Installation
yarn add @paprika/switch
or with npm:
npm install @paprika/switch
Props
Switch
| Prop | Type | required | default | Description |
|---|---|---|---|---|
| a11yText | string | false | null | Descriptive a11y text for assistive technologies. Typically required. |
| canPropagate | bool | false | true | If click events are allowed to propagate up the DOM tree. |
| isChecked | bool | false | false | If the switch is on. |
| isDisabled | bool | false | false | If the switch is disabled. |
| onChange | func | false | () => {} | Callback to be executed when the switch is toggled on or off. Typically required. |
| size | [ Switch.types.size.SMALL, Switch.types.size.MEDIUM, Switch.types.size.LARGE] | false | Switch.types.size.MEDIUM | Size of the switch. |
Usage
For a basic switch
import Switch from "@paprika/switch";
<Switch isChecked={switchState} onChange={changeHandler} />;