Checkbox Group

A checkbox group is a helper component that groups Checkbox components into a visual and functional group.

Overview

pie-checkbox-group is a Web Component built using Lit.

It is a helper component that groups pie-checkbox components into a visual and functional group.

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

Installation

To install pie-checkbox-group in your application, run the following on your command line:

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

Peer Dependencies

When using pie-checkbox-group, 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

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

Slots

Slot	Description
`default`	Pass PieCheckbox components as direct children for the CheckboxGroup.
`label`	Pass PieFormLabel to render the checkbox group label.

Importing and usage in templates

For Native JS Applications:

// 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';

<!-- pass js file into <script> tag -->
<pie-checkbox-group>
  <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 Vue Applications:

// 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';

<pie-checkbox-group>
  <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';

<PieCheckboxGroup>
  <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>

// React templates (using Next 13 and SSR)
import { PieCheckboxGroup } from '@justeattakeaway/pie-checkbox-group/dist/react';
import { PieCheckbox } from '@justeattakeaway/pie-checkbox/dist/react';

<PieCheckboxGroup>
  <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>

Forms Usage

Please use the form label component for adding a label to the Checkbox Group component.

 <PieCheckboxGroup>
  <PieFormLabel slot="label">Choose the way we can contact you:</PieFormLabel>
  <PieCheckbox>
    Contact By Email
  </PieCheckbox>
  <PieCheckbox>
    Contact By Phone
  </PieCheckbox>
</PieCheckboxGroup>