JSPM

@lion/radio-group

0.8.1
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 473
  • Score
    100M100P100Q105175F
  • License MIT

Manage a group of choices

Package Exports

  • @lion/radio-group
  • @lion/radio-group/lion-radio-group.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@lion/radio-group) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Radio-group

🛠 Status: Pilot Phase

Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.

The goal of our pilot phase is to gather feedback from a private group of users. Therefore, during this phase, we kindly ask you to:

  • not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
  • not publicly promote or link products derived from/based on Lion Web Components

As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1)

lion-radio-group component is webcomponent that enhances the functionality of the native <input type="radio"> element. Its purpose is to provide a way for users to check a single option amongst a set of choices.

You should use lion-radio's inside this element.

Live Demo/Documentation

See our storybook for a live demo and API documentation

How to use

Installation

npm i --save @lion/radio @lion/radio-group
import '@lion/radio/lion-radio.js';
import '@lion/radio-group/lion-radio-group.js';

Example

<lion-radio-group name="dinos" label="What are your favourite dinosaurs?">
  <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
  <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
  <lion-radio label="diplodocus" .choiceValue=${'diplodocus'} checked></lion-radio>
</lion-radio-group>
  • Make sure that to use a name attribute as it is necessary for the lion-form's serialization result.
  • If you have many options for a user to pick from, consider using lion-select instead