@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