Radio Group

Overview

pie-radio-group is a Web Component built with Lit, providing a simple and accessible group of radio buttons for web applications.

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

Installation

To install pie-radio-group in your application via npm or yarn:

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

Props

Prop	Options	Description	Default
name		The name associated with the group.	`undefined`
value		The value of the radio group (used as a key/value pair in HTML forms with `name`).	`""`
isInline	`true` `false`	Inline (horizontal) positioning of radio items.	`false`
disabled	`true` `false`	Indicates whether or not the radio group is disabled.	`false`
assistiveText		An optional assistive text to display below the checkbox group.	`undefined`
status	`"default"` `"success"` `"error"`	The status of the radio group component / assistive text. Can be default, success, or error.	`"default"`

Slots

Slot	Description
`default`	This should be pie-radio-button components without any other HTML.
`label`	To provide a custom label for the radio group. Please use pie-form-label.

Events

Event	Description
`change`	Fires when one of the radio group's state is changed.

Importing and usage in templates

For HTML:

Please ensure you apply the name property to each individual radio button.

import '@justeattakeaway/pie-webc/components/radio-group.js';
import '@justeattakeaway/pie-webc/components/radio.js';
import '@justeattakeaway/pie-webc/components/form-label.js';

<pie-radio-group>
    <pie-form-label slot="label">Favourite takeaway:</pie-form-label>
    <pie-radio name="favouriteTakeaway" value="chinese">Chinese</pie-radio>
    <pie-radio name="favouriteTakeaway" value="shawarma">Shawarma</pie-radio>
</pie-radio-group>

For Vue applications:

import '@justeattakeaway/pie-webc/components/radio-group.js';
import '@justeattakeaway/pie-webc/components/radio.js';
import '@justeattakeaway/pie-webc/components/form-label.js';

<pie-radio-group name="favouriteTakeaway" @change="favouriteTakeaway = $event.target.value">
  <pie-form-label>Your favourite takeaway:</pie-form-label>
  <pie-radio value="chinese">Chinese</pie-radio>
  <pie-radio value="shawarma">Shawarma</pie-radio>
</pie-radio-group>

For React Applications:

import { PieRadioGroup } from '@justeattakeaway/pie-webc/react/radio-group.js';
import { PieRadio } from '@justeattakeaway/pie-webc/react/radio.js';
import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';

<PieRadioGroup name="favouriteTakeaway" onChange={handleFavouriteTakeaway}>
    <PieFormLabel slot="label">Choose a radio button:</PieFormLabel>
    <PieRadio value="chinese">Chinese</PieRadio>
    <PieRadio value="shawarma">Shawarma</PieRadio>
</PieRadioGroup>

Forms usage

There are two kinds of forms usage to consider:

Controlled forms: These are when forms are built using HTML, but controlled via application state. This is a common pattern in React and Vue applications.
Uncontrolled forms: These are when forms are built using HTML and the form data is collected natively, usually via the FormData interface.

When using the radio group component, the most important thing to be aware of is that if you are using an uncontrolled form (whether or not it is in a single-paged application or just HTML), you must apply the name property directly to each radio button inside the group. This ensures it is correctly captured in the FormData object when the form is submitted.

When using controlled forms in an framework such as Vue or React, you can simply apply the name property to the radio group and omit adding it to each individual radio button.