Switch

A toggle switch for binary on/off settings. Emits a change event with detail.checked when toggled.

Playground

Controls

Variant

Size

Checked

Disabled

Required

Label

Label Position

Name

Value

Labels

Theme

HTMLReact

ShareCopy

Usage

<lt-switch label="Enable notifications"></lt-switch>
<lt-switch label="Dark mode" variant="success" checked></lt-switch>
<lt-switch label="Unavailable" disabled></lt-switch>

<lt-switch id="notif" label="Enable notifications"></lt-switch>

<script>
document.getElementById('notif').addEventListener('change', (e) => {
  console.log('checked:', e.detail.checked);
});
</script>

import { Switch } from '@latty-ds/react';

<Switch label="Enable notifications" />
<Switch label="Dark mode" variant="success" checked />
<Switch label="Unavailable" disabled />

<Switch
label="Enable notifications"
onChange={(e) => console.log('checked:', e.detail.checked)}
/>

<script setup>
import { ref } from 'vue'
const enabled = ref(false)
</script>

<template>
<lt-switch label="Enable notifications"></lt-switch>
<lt-switch label="Dark mode" variant="success" checked></lt-switch>
<lt-switch label="Unavailable" disabled></lt-switch>

<lt-switch
label="Enable notifications"
@change="(e) => enabled = e.detail.checked"></lt-switch>

</template>

API