@justeattakeaway/pie-checkbox-group

Source Code | Design Documentation | NPM

@justeattakeaway/pie-checkbox-group is a Web Component built using the Lit library. It offers a simple and accessible checkbox group component for web applications.

Table of Contents

• Installation
• Documentation
  • Properties
  • Slots
  • CSS Variables
  • Events
• Usage Examples
• Questions and Support
• Contributing

Installation

To install any of our web components in your application, we would suggest following the getting started guide to set up your project.

Ideally, you should install the component using the @justeattakeaway/pie-webc package, which includes all of the components. Or you can install the individual component package.

Documentation

Properties

| Prop | Options | Description | Default | |------------------|--------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|--------------| | name | - | The name associated with the group. | - | | disabled | - | Same as the HTML disabled attribute – indicates whether or not the checkbox group is disabled. | false | | assistiveText | - | Allows assistive text to be displayed below the checkbox group. | - | | isInline | - | Inline (horizontal) positioning of checkbox items. | false | | status | "default", "error", "success" | The status of the checkbox group / assistive text. If you use status, you must provide an assistiveText prop value for accessibility. | "default" |

Slots

| Slot | Description | |--------------|----------------------------------------------------------------------------------| | default | Either pie-checkbox components, or pie-list-item components that each slot a pie-checkbox for a list-style layout (see List items in a checkbox group). Do not add other HTML. | | label | Pass PieFormLabel to render the checkbox group label. |

CSS Variables

This component does not expose any CSS variables for style overrides.

Events

This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.

Usage Examples

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/checkbox-group.js';
import '@justeattakeaway/pie-webc/components/checkbox.js';
import '@justeattakeaway/pie-webc/components/form-label.js';

<pie-checkbox-group>
  <pie-form-label slot="label">Choose the way we can contact you:</pie-form-label>
  <pie-checkbox name="my-checkbox-one">Checkbox Label 1</pie-checkbox>
  <pie-checkbox name="my-checkbox-two">Checkbox Label 2</pie-checkbox>
  <pie-checkbox name="my-checkbox-three">Checkbox Label 3</pie-checkbox>
</pie-checkbox-group>

<script type="module" src="/main.js"></script>

For Native JS Applications, Vue, Angular, Svelte etc.:

// import as module into a js file that will be loaded on the page where the component is used.
import '@justeattakeaway/pie-webc/components/checkbox-group.js';
import '@justeattakeaway/pie-webc/components/checkbox.js';
import '@justeattakeaway/pie-webc/components/form-label.js';

<pie-checkbox-group>
  <pie-form-label slot="label">Choose the way we can contact you:</pie-form-label>
  <pie-checkbox name="my-checkbox-one">Checkbox Label 1</pie-checkbox>
  <pie-checkbox name="my-checkbox-two">Checkbox Label 2</pie-checkbox>
  <pie-checkbox name="my-checkbox-three">Checkbox Label 3</pie-checkbox>
</pie-checkbox-group>

For React Applications:

import { PieCheckboxGroup } from '@justeattakeaway/pie-webc/react/checkbox-group.js';
import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js';
import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';

<PieCheckboxGroup>
  <PieFormLabel slot="label">Choose the way we can contact you:</PieFormLabel>
  <PieCheckbox name="my-checkbox-one">Checkbox Label 1</PieCheckbox>
  <PieCheckbox name="my-checkbox-two">Checkbox Label 2</PieCheckbox>
  <PieCheckbox name="my-checkbox-three">Checkbox Label 3</PieCheckbox>
</PieCheckboxGroup>

List items in a checkbox group

For a list-style layout (each option on its own row with primary and secondary text, and dividers between rows), wrap each pie-checkbox in a pie-list-item with interactionType="checkbox" and place them inside the group. The checkbox goes in the item's leading (or trailing) slot, and you provide the label through the item's primaryText rather than as the checkbox's content.

For full usage details and code examples, see the pie-list documentation.

Questions and Support

If you work at Just Eat Takeaway.com, please contact us on #help-designsystem. Otherwise, please raise an issue on Github.

Contributing

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