Toggle Switch

A toggle switch represents a physical switch that allows someone to choose between two mutually exclusive options. For example, 'On/Off' and 'Show/Hide'. Choosing an option should produce an immediate result.

Toggle me I'm disabled

Usage

<script>
	import { ToggleSwitch } from 'fluentui-svelte';
</script>

<ToggleSwitch />
<ToggleSwitch label="Toggle me" />
<ToggleSwitch label="I'm disabled" disabled />

States

A toggle switch can be labeled, checked or disabled.

View Code

<ToggleSwitch label="Off" />
<ToggleSwitch label="On" checked />
<ToggleSwitch label="Disabled" disabled />

Off On Disabled

Component Props

Name	Type	Description
`checked` bindable	`boolean`	Whether the switch is on.
`ref` bindable	`HTMLInputElement`	The DOM reference of the input element.
`label`	`string`	The label displayed next to the input element.
`labelAttributes`	`HTMLLabelAttributes`	The attributes to spread on the label wrapping the switch.
`labelElement`	`HTMLLabelElement`	The DOM reference of the label element.
`SvelteHTMLElements['input']`