@justeattakeaway/pie-radio v0.11.3

@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.

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

Slots

CSS Variables

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

Events

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.