ToggleSwitch

The toggle switch represents a physical switch that allows users to turn things on or off, like a light switch. Use toggle switch controls to present users with two mutually exclusive options (such as on/off), where choosing an option provides immediate results.

import { ToggleSwitch } from "@riversidevalley/fluid";

Usage

<ToggleSwitch /> is a wrapper around HTML’s <input /> checkbox type. As such, the APIs share some similarities.

Checking and Unchecking

You can programmatically control if the ToggleSwitch is in it’s checked state by setting the checked property.

<ToggleSwitch checked />

Additionally, you can use svelte’s two-way binding syntax to bind the checked state to a variable.

<script>
	import { ToggleSwitch } from "@riversidevalley/fluid";

	let checked = false;
</script>

<ToggleSwitch bind:checked />

Current state: {checked ? "checked" : "unchecked"}

Labels

Passing in content to the ToggleSwitch’s slot will cause that content to be rendered into a label for the control.

<ToggleSwitch>I have a label!</ToggleSwitch>

Value

For usage in forms, you can set a value property which will set the value of the ToggleSwitch’s <input> element.

Disabled ToggleSwitches

If the ToggleSwitch is not meant to be clicked, you can use the disabled property to visually indicate this. If a ToggleSwitch is disabled, it will be unclickable.

Component API

Props

Slots

Events

All DOM events are forwarded to this component's respective elements by default. Learn More

Dispatched Events

None