mielui
Inputs

Switch

A toggle for settings that apply immediately.

Installation

pnpm dlx @mielui/svelte add switch

Usage

Bind checked to read or set the state. label names the switch and toggles it when clicked, and description is announced with it. Without a visible label, pass aria-label. Set name and value to include the switch in a form submission while it is on.

<script lang="ts">
    import { Switch } from '@mielui/svelte/components/switch';

    let enabled = $state(false);
</script>

<Switch bind:checked={enabled} label="Notifications" />

Bind element to reach the underlying button, for example to focus it.

Examples

Basic

With description

Disabled

API reference

Switch

Toggles a boolean value.

  • checked Bindable
    boolean

    Whether it is on. Bindable.

    Default false

  • label
    string

    Visible label linked to the control.

  • description
    string

    Supporting text under the label, announced with the control.

  • element Bindable
    HTMLButtonElement

    Bindable reference to the DOM element.