@justeattakeaway/pie-radio

Source Code | Design Documentation | NPM

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

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
`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 the native `required` attribute. If any radio button in a same-named group 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.

CSS Variables

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

Events

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

Usage Examples

⚠️ It is likely you will want to use this component inside of our Radio Group component, which allows you to group radio buttons together and manage their state and keyboard navigation.

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

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

For React Applications:

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

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

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.