Toggle

An accessible toggle switch for boolean inputs.

uiforminteractive

Installation

Copy the component file into your project's src/lib/components/ directory.

templates/Toggle.svelte

Usage

<script>
  import Toggle from '$lib/components/Toggle.svelte';

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

<Toggle bind:checked={enabled} label="Enable notifications" />
<p>Notifications: {enabled ? 'On' : 'Off'}</p>

Props

Prop	Type	Default	Description
checked	boolean	false	Whether the toggle is on
disabled	boolean	false	Whether the toggle is disabled
label	string	''	Accessible label for screen readers

Files

Toggle.svelte