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 aria-label="Notifications" />
<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

Disabled

Form Control Attributes

Attributes and events apply to the native form field; ref gives you access to it. For the container, use wrapperAttributes and wrapperRef.

Component Props

Name	Type	Description
`checked` bindable	`boolean` \| `null`	Whether the switch is on.
`ref` bindable	`HTMLInputElement` \| `null`	The DOM reference of the input element.
`label`	`string`	The label displayed next to the input element. Inside a `Label`, it is not rendered
`wrapperAttributes`	`HTMLAttributes`	The attributes to spread on the wrapper element.
`wrapperRef` bindable	`HTMLDivElement` \| `null`	The DOM reference of the wrapper element.
Element Attributes (`input`)

Components

Toggle Switch

Usage

States

Form Control Attributes

Component Props