lion/packages/switch
CircleCI ad01e959c6 chore: release new versions
- @lion/button@0.4.6
 - @lion/calendar@0.5.8
 - @lion/checkbox-group@0.4.4
 - @lion/checkbox@0.2.13
 - @lion/choice-input@0.4.11
 - @lion/field@0.7.1
 - @lion/fieldset@0.5.7
 - @lion/form-system@0.2.16
 - @lion/form@0.3.14
 - @lion/input-amount@0.4.2
 - @lion/input-date@0.4.2
 - @lion/input-datepicker@0.7.6
 - @lion/input-email@0.4.2
 - @lion/input-iban@0.4.2
 - @lion/input-range@0.1.1
 - @lion/input@0.4.2
 - @lion/localize@0.7.2
 - @lion/option@0.3.11
 - @lion/radio-group@0.4.5
 - @lion/radio@0.2.13
 - @lion/select-rich@0.8.9
 - @lion/select@0.4.2
 - @lion/switch@0.4.2
 - @lion/textarea@0.4.2
 - @lion/validate@0.5.4
2020-01-08 15:32:29 +00:00
..
src feat(field): add wrappers to allow label left of input 2019-12-13 15:19:41 +01:00
stories chore(switch): cleanup validator in stories 2019-12-13 15:19:41 +01:00
test feat: finalize validation and adopt it everywhere 2019-11-18 15:30:08 +01:00
CHANGELOG.md chore: release new versions 2020-01-08 15:32:29 +00:00
index.js chore(switch): rename 2019-10-30 16:21:30 +01:00
lion-switch-button.js chore(switch): rename 2019-10-30 16:21:30 +01:00
lion-switch.js chore(switch): rename 2019-10-30 16:21:30 +01:00
package.json chore: release new versions 2020-01-08 15:32:29 +00:00
README.md feat: finalize validation and adopt it everywhere 2019-11-18 15:30:08 +01:00

Switch

lion-switch is a component that is used to toggle a property or feature on or off. Toggling the component on or off should have immediate action and should not require pressing any additional buttons (submit) to confirm what just happened. The Switch is not a Checkbox in disguise and should not be used as part of a form.

Features

  • Get or set the checked state (boolean) - checked boolean attribute
  • Pre-select an option by setting the checked boolean attribute
  • Get or set the value of the choice - choiceValue()

How to use

Installation

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

Example

<lion-switch name="airplaneMode" label="Airplane mode" checked></lion-switch>