Radio

A radio button is an interactive element that allows users to select a single option from a predefined set of choices.

Overview

pie-radio is a Web Component built using Lit. It offers a simple and accessible radio button component for web applications.

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

Installation

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

npm i @justeattakeaway/pie-webc

yarn add @justeattakeaway/pie-webc

Props

Prop	Options	Description	Default
checked	`true` `false`	The checked state of the radio.	`false`
defaultChecked	`true` `false`	The default checked state of the radio (not necessarily the same as the current checked state). Used when the radio is part of a form that is reset.	`false`
disabled	`true` `false`	Same as the HTML disabled attribute - indicates whether or not the radio is disabled.	`false`
name	`string`	The name of the radio (used as a key/value pair with `value`). This is required in order to work properly with forms.	`undefined`
required	`true` `false`	Same as native required attribute. If any radio button in a same-named group of radio buttons has the required attribute, a radio button in that group must be checked, although it doesn't have to be the one with the attribute applied.	`false`
value	`string`	The value of the radio (used as a key/value pair in HTML forms with `name`).	`undefined`
status	`"default"` `"error"`	The status of the radio component. Can be default or error.	`"default"`

Slots

Slot	Description
`default`	The default slot is used for the radio label text.

Events

Event	Description
`change`	Fires when the radio is checked (but not when unchecked).
`input`	Should fire whenever a user toggles the radio.

Examples

For HTML:

// import as module into a js file e.g. main.js
import '@justeattakeaway/pie-webc/components/radio.js'

<!-- pass js file into <script> tag -->
<pie-radio></pie-radio>
<script>
    const pieRadio = document.querySelector('pie-radio');
    // Properties can be set like any JS object
    pieRadio.checked = checked;
</script>

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

// Vue templates (using Nuxt 3)
import '@justeattakeaway/pie-webc/components/radio.js';

// Setup code omitted
<pie-radio :checked="checked" value="value" @change="handleRadioChange"></pie-radio>

For React Applications. When using the React version of the component, please make sure you also include React as a dependency in your project as well. See Peer Dependencies section.

import { PieRadio } from '@justeattakeaway/pie-webc/react/radio.js';

// Setup code omitted
<PieRadio
    checked={isRadioChecked}
    value="value"
    onInput={handleRadioInput}>
    {`checked: ${isRadioChecked}`}
</PieRadio>

For NextJS 13, please directly import from the individual component package. All other template usage is the same as above.

// React templates (using Next 13 and SSR)
import { PieRadio } from '@justeattakeaway/pie-radio/dist/react';