Switch

A control that allows the user to toggle between checked and not checked.

Examples

Default

Airplane Mode

<script setup>
import { Switch, Label } from '@empathyds/vue'
</script>

<div class="flex items-center space-x-2">
  <Switch id="airplane-mode" />
  <Label for="airplane-mode">Airplane Mode</Label>
</div>

Props

Switch

Prop	Type	Default	Description
checked	boolean	-	The controlled checked state of the switch.
defaultChecked	boolean	false	The checked state of the switch when it is initially rendered.
disabled	boolean	false	Whether the switch is disabled.
required	boolean	false	Whether the switch is required.
name	string	-	The name of the switch.
value	string	'on'	The value of the switch.
id	string	-	The id of the switch.

Events

Switch

Event	Payload	Description
update:checked	boolean	Event handler called when the checked state of the switch changes.

Slots

Switch

Slot	Description
thumb	The thumb content.