Toggle

A two-state button that can be either on or off.

View code

Features

Full keyboard navigation
Can be controlled or uncontrolled

Anatomy

Toggle: The toggle component

Usage

To create a toggle, use the createToggle builder function. Follow the anatomy or the example above to create your toggle.

Disabling the toggle

To disable a the toggle, set the disabled argument to true.

    <script lang="ts">
  import { createToggle } from '@melt-ui/svelte'
 
  const {
    options: { disabled }
  } = createToggle({
    disabled: true
  })
  // or
  disabled.set(true)
  // or
  disabled.update((d) => !d)
</script>

    <script lang="ts">
  import { createToggle } from '@melt-ui/svelte'
 
  const {
    options: { disabled }
  } = createToggle({
    disabled: true
  })
  // or
  disabled.set(true)
  // or
  disabled.update((d) => !d)
</script>

API Reference

createToggle

The builder function used to create the toggle component.

Props

Prop	Default	Type / Description
`disabled`	`false`	`boolean` Whether or not the toggle is disabled.
`defaultPressed`	`false`	`boolean` Whether or not the toggle is pressed.
`pressed`	-	`Writable<boolean>` A writable store that controls the pressed state of the toggle. See Bring Your Own Store
`onPressedChange`	-	`ChangeFn<boolean>` A callback called when the value of the `pressed` store should be changed. This is useful for controlling the value of the toggle from outside the toggle. See Change Functions

Elements

Element	Description
`root`	The builder store used to create the toggle root.

States

State	Description
`pressed`	A writable store that represents the pressed state of the toggle.

Options

Option	Description
`disabled`	Whether or not the toggle is disabled.

root

The root toggle component.

Data Attributes

Data Attribute	Value
`[data-disabled]`	Present when the toggle is disabled.
`[data-state]`	`'on' \| 'off'`
`[data-melt-toggle]`	Present on all toggle elements.

Custom Events

Event	Value
`m-click`	`(e: ) => void`
`m-keydown`	`(e: ) => void`

Accessibility

Adheres to the Button WAI-ARIA design pattern

Key	Behavior
`Space`	Activates/deactivates the `toggle`.
`Enter`	Activates/deactivates the `toggle`.

On This Page