Toggle

A trigger that can be toggled on and off.

Props

Disabled

Features

💪 It works

Usage

For accessibility reasons, toggle buttons also require the aria-label attribute to be set to describe to screen readers what is being enabled/disabled.

Builder
Component

<script lang="ts">
  import { Toggle } from "melt/builders";

  const toggle = new Toggle();
</script>

<button {...toggle.trigger} aria-label="toggle favourite">
  {toggle.value ? "✅" : "❌"}
</button>

<script lang="ts">
  import { Toggle } from "melt/components";
</script>

<Toggle>
  {#snippet children(toggle)}
    <button {...toggle.trigger}>
      {toggle.value ? "✅" : "❌"}
    </button>
  {/snippet}
</Toggle>

API Reference

Constructor Props

The props that are passed when calling

new Toggle()

export type ToggleProps = {
  /**
   * The value for the Toggle.
   *
   * When passing a getter, it will be used as source of truth,
   * meaning that the value only changes when the getter returns a new value.
   *
   * Otherwise, if passing a static value, it'll serve as the default value.
   *
   *
   * @default false
   */
  value?: MaybeGetter<boolean>;
  /**
   * Called when the value is supposed to change.
   */
  onValueChange?: (value: boolean) => void;

  /**
   * If `true`, prevents the user from interacting with the input.
   *
   * @default false
   */
  disabled?: MaybeGetter<boolean | undefined>;
};

export type ToggleProps = {
  /**
   * The value for the Toggle.
   *
   * When passing a getter, it will be used as source of truth,
   * meaning that the value only changes when the getter returns a new value.
   *
   * Otherwise, if passing a static value, it'll serve as the default value.
   *
   *
   * @default false
   */
  value?: MaybeGetter<boolean>;
  /**
   * Called when the value is supposed to change.
   */
  onValueChange?: (value: boolean) => void;

  /**
   * If `true`, prevents the user from interacting with the input.
   *
   * @default false
   */
  disabled?: MaybeGetter<boolean | undefined>;
};

Properties

The properties returned from

new Toggle()

disabled
```
boolean
```
```
boolean
```
value
```
boolean
```
```
boolean
```

trigger

{
  readonly "data-melt-toggle-trigger": ""
  readonly "data-checked": "" | undefined
  readonly "aria-pressed": boolean
  readonly disabled: true | undefined
  readonly onclick: () => void
}

The trigger that toggles the value.

hiddenInput

{
  readonly "data-melt-toggle-hidden-input": ""
  readonly type: "hidden"
  readonly value: "on" | "off"
}

A hidden input field to use within forms.