ToggleSwitch

Edit This Page

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 "fluent-svelte";

ToggleSwitch ToggleSwitch ToggleSwitch ToggleSwitch

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 "fluent-svelte";

	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

API docs automatically generated by sveld and vite-plugin-sveld.

Props

Name	Type	Default	Description
`checked`	`boolean`	`false`	Controls whether the switch is toggled or not.
`value`	Unknown	`undefined`	Sets the input element's native `value` attribute for usage in forms.
`disabled`	`boolean`	`false`	Controls whether the switch is intended for user interaction, and styles it accordingly.
`inputElement`	`null \| HTMLInputElement`	`null`	Obtains a bound DOM reference to the switch's <input /> element.
`containerElement`	`null \| HTMLLabelElement`	`null`	Obtains a bound DOM reference to the switch's outer container element.

This component uses $$restProps.

All unused props will be passed through to the underlying input element as regular attributes.

More Info

Slots

Name	Slot Props	Fallback
`Unnamed (Default)`	`{}`	Empty

Events

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

Dispatched Events

None