Basic Usage

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

On By Default

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

Responsive Behavior

The visual toggle maintains its size even in narrow containers. Only the label shrinks to fit the available space.

<div style="width: 150px;">
  <k-toggle>A very long label that should shrink</k-toggle>
</div>

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>

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>

Disabled

The disabled attribute prevents the user from changing the toggle's state while still displaying its current value.

<k-toggle disabled>Disabled Off</k-toggle>
<k-toggle disabled value>Disabled On</k-toggle>

JavaScript Reference

Constructor

Extends Component

new Toggle()

Requirements

• Component

Properties

value: boolean

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

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.

disabled: boolean

When true, the toggle cannot be changed by user interaction. The current state is still displayed. The element will appear at 50% opacity. Syncs to disabled attribute.

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.