@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} />;

Links

• Storybook Showcase
• GitHub source code
• Create GitHub issue
• CHANGELOG