lion/packages/switch

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.

import { html } from 'lit-html';
import { Validator } from '@lion/form-core';
import { LionSwitch } from './index.js';
import './lion-switch.js';
import '@lion/helpers/sb-action-logger.js';

export default {
  title: 'Buttons/Switch',
};

export const main = () => html` <lion-switch label="Label" help-text="Help text"></lion-switch> `;

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 { LionSwitch } from '@lion/switch';
// or
import '@lion/switch/lion-switch.js';

Example

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

Disabled

You can disable switches.

export const disabled = () => html` <lion-switch label="Label" disabled></lion-switch> `;

Validation

Simple example that illustrates where validation feedback will be displayed.

export const validation = () => {
  const IsTrue = class extends Validator {
    static get validatorName() {
      return 'IsTrue';
    }
    execute(value) {
      return !value.checked;
    }
    static async getMessage() {
      return "You won't get the latest news!";
    }
  };
  const tagName = 'custom-switch';
  if (!customElements.get(tagName)) {
    customElements.define(
      tagName,
      class CustomSwitch extends LionSwitch {
        static get validationTypes() {
          return [...super.validationTypes, 'info'];
        }
      },
    );
  }
  return html`
    <custom-switch
      id="newsletterCheck"
      name="newsletterCheck"
      label="Subscribe to newsletter"
      .validators="${[new IsTrue(null, { type: 'info' })]}"
    ></custom-switch>
  `;
};

With checked-changed handler

You can listen for a checked-changed event that is fired when the switch is clicked.

export const handler = () => {
  const uid = Math.random().toString(36).substr(2, 10);
  return html`
    <lion-switch
      label="Label"
      @checked-changed="${e => {
        document.getElementById(`logger-${uid}`).log(`Current value: ${e.target.checked}`);
      }}"
    >
    </lion-switch>
    <sb-action-logger id="logger-${uid}"></sb-action-logger>
  `;
};