Table of Contents

1. Introduction
2. Installation
3. Importing the component
4. Peer Dependencies
5. Props
6. Contributing

pie-toggle-switch

pie-toggle-switch is a Web Component built using the Lit library.

This component can be easily integrated into various frontend frameworks and customized through a set of properties.

Installation

To install pie-toggle-switch in your application, run the following on your command line:

# npm
$ npm i @justeattakeaway/pie-toggle-switch

# yarn
$ yarn add @justeattakeaway/pie-toggle-switch

For full information on using PIE components as part of an application, check out the Getting Started Guide.

Importing the component

// default
import { PieToggleSwitch } from '@justeattakeaway/pie-toggle-switch';

// react
import { PieToggleSwitch } from '@justeattakeaway/pie-toggle-switch/dist/react';

Peer Dependencies

[!IMPORTANT] When using pie-toggle-switch, you will also need to include a couple of dependencies to ensure the component renders as expected. See the PIE Wiki for more information and how to include these in your application.

Props

| Property | Type | Default | Description | |---|---|---|---| | isChecked | Boolean | false | Indicates whether the switch is on or off | | isDisabled | Boolean | false | Indicates whether the switch is disabled or not | | aria | Object | undefined | An object representing the aria labels label & describedBy that can be used on the toggle-switch;

In your markup or JSX, you can then use these to set the properties for the pie-toggle-switch component:

<!-- Native HTML -->
<pie-toggle-switch></pie-toggle-switch>

<!-- JSX -->
<PieToggleSwitch></PieToggleSwitch>

Contributing

Check out our contributing guide for more information on local development and how to run specific component tests.