View on GitHub

Switch

A switch allows users to turn a setting ON or OFF.

Usage

Import the Switch component from “figBlocks”.

<script>
	import { Switch } from 'figblocks';
</script>

<Switch />

Switch with label

The default slot can be used to pass the label.

<Switch>Notifications</Switch>

Disabled state

Pass the disabled prop to disable the switch.

<Switch disabled>Email Notifications</Switch>
<Switch disabled checked>Desktop Notifications</Switch>

Props

checked boolean false If true, the switch will be turned ON.
name string undefined The name of the input element, used when submitting a form.
value string undefined The value of the input element, used when submitting a form.
disabled boolean false If true, the switch will be disabled.
class string undefined Custom CSS classname for styling.

Slots

Events