# Toggle

Table of Contents

###### Examples

Basic Usage
On By Default
Custom Styles
JavaScript Usage

###### JavaScript Reference

Constructor
Requirements
Attributes
Properties
Methods

### Basic Usage

    <k-toggle>Toggle Me</k-toggle>

Toggle Me

### On By Default

    <k-toggle value="true">Toggle Me</k-toggle>

Toggle Me

### Custom Styles

    <k-toggle
      style="
        --switch_height: 3rem;
        --switch_width: 5rem;
        --switch_border: none;
        --switch_background__off: var(--c_danger);
        --switch_background__on: var(--c_success);
        --handle_size__off: 2rem;
        --handle_size__on: calc(3rem - 2px);
        --handle_border: none;
        --handle_background__off: #ddd;
        --handle_background__on: white;
      "
    >Toggle Me</k-toggle>

Toggle Me

### JavaScript Usage

    <k-toggle id="tog1">Toggle Me</k-toggle>
    <button id="turnOn">Turn On</button>
    <button id="turnOff">Turn Off</button>
    <button id="toggle">Toggle</button>
    <script>
      const $tog1 = document.getElementById('tog1');
      document.getElementById('turnOn').addEventListener('click', ()=>{
        $tog1.on();
      });
      document.getElementById('turnOff').addEventListener('click', ()=>{
        $tog1.off();
      });
      document.getElementById('toggle').addEventListener('click', ()=>{
        $tog1.toggle();
      });
    </script>

Toggle Me

## JavaScript Reference

### Constructor

###### Extends Component

##### `new Toggle()`

### Requirements

- Component

### Attributes

##### `value: boolean`

A boolean that indicates if the switch is on or off, the default value is `false`.

This can be set directly, but it is not recommended as it only triggers the a `change` event and not a `on`, `off` or `toggle` event as the methods do, so the methods are preferrable.

### Methods

##### `on(): this`

Set's the `value` to `true`, dispatches a `change` and an `on` event. The switch visual changes to the on state.

##### `off(): this`

Set's the `value` to `false`, dispatches a `change` and an `off` event. The switch visual changes to the off state.

##### `toggle(): this`

Negates the `value`, if it is `true` it is now set to `false`, but if it is `false` it is now set to `true`. It also dispatches dispatches a `change` and an `on` or `off` event. The switch visual changes to the oposite state.