- @lion/button@0.4.1 - @lion/calendar@0.5.1 - @lion/checkbox-group@0.4.0 - @lion/checkbox@0.2.11 - @lion/choice-input@0.4.9 - @lion/field@0.6.8 - @lion/fieldset@0.5.3 - @lion/form-system@0.2.9 - @lion/form@0.3.9 - @lion/input-amount@0.4.0 - @lion/input-date@0.4.0 - @lion/input-datepicker@0.6.1 - @lion/input-email@0.4.0 - @lion/input-iban@0.4.0 - @lion/input@0.4.0 - @lion/option@0.3.9 - @lion/popup@0.4.4 - @lion/radio-group@0.4.0 - @lion/radio@0.2.11 - @lion/select-rich@0.8.1 - @lion/select@0.4.0 - @lion/switch@0.3.11 - @lion/textarea@0.4.0 |
||
|---|---|---|
| .. | ||
| src | ||
| test | ||
| CHANGELOG.md | ||
| index.js | ||
| lion-radio.js | ||
| package.json | ||
| README.md | ||
Radio
lion-radio component is a sub-element to be used in lion-radio-group elements. Its purpose is to provide a way for users to check a single option amongst a set of choices.
Features
- Get the checked state (boolean) -
checkedboolean attribute - Pre-select an option by setting the
checkedboolean attribute - Get or set the value of the choice -
choiceValue()
How to use
Installation
npm i --save @lion/radio
import '@lion/radio/lion-radio.js';
Example
<lion-radio name="dinos[]" label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
<lion-radio name="dinos[]" label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
<lion-radio name="dinos[]" label="diplodocus" .choiceValue=${'diplodocus'} checked></lion-radio>
- Use this component inside a lion-radio-group
- Make sure that it has a name attribute with appended
[]for multiple choices.