lion/docs/components/interaction/switch/use-cases.md

Interaction >> Switch >> Use Cases ||20

import { html } from '@mdjs/mdjs-preview';
import { Validator } from '@lion/form-core';
import { LionSwitch } from '@lion/switch';
import '@lion/switch/define';
import '@lion/helpers/define-sb-action-logger';

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'];
        }

        _showFeedbackConditionFor(type) {
          if (type === 'info') {
            return true;
          }
          return super._showFeedbackConditionFor(type);
        }
      },
    );
  }
  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 = ({ shadowRoot }) => {
  return html`
    <lion-switch
      label="Label"
      @checked-changed="${ev => {
        shadowRoot.querySelector('sb-action-logger').log(`Current value: ${ev.target.checked}`);
      }}"
    >
    </lion-switch>
    <sb-action-logger></sb-action-logger>
  `;
};