import { Story, Meta, html } from '@open-wc/demoing-storybook';
import { Validator } from '@lion/validate';
import '../lion-switch.js';
# 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.
{html`
`}
```html
```
{html`
`}
```html
```
## 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
```sh
npm i --save @lion/switch
```
```js
import '@lion/switch/lion-switch.js';
```
## Examples
### Disabled
You can disable switches.
{html`
`}
```html
```
### Validation
Simple example that illustrates where validation feedback will be displayed.
{() => {
const IsTrue = class extends Validator {
constructor(...args) {
super(...args);
this.name = 'IsTrue';
}
execute(value) {
return !value.checked;
}
static async getMessage() {
return "You won't get the latest news!";
}
};
return html`
`;
}}
```js
import { Validator } from '@lion/validate';
const IsTrue = class extends Validator {
constructor(...args) {
super(...args);
this.name = 'IsTrue';
}
execute(value) {
return !value.checked;
}
static async getMessage() {
return "You won't get the latest news!";
}
};
```
```html
```