Switch

Penggunaan

<script setup lang="ts">
const notifications = ref(true)
</script>

<template>
  <SSwitch v-model="notifications" label="Notifications" />
</template>

States

disabled mencegah interaksi dan meredupkannya, dan invalid mengubah track ke role semantik danger:

<SSwitch v-model="disabledOff" disabled label="Disabled" />
<SSwitch v-model="disabledOn" disabled label="Disabled, on" />
<SSwitch v-model="invalidChoice" invalid label="You must enable this to continue" />

Lihat Props.

Ukuran

size menerima sm / md / lg, menyesuaikan track, thumb, dan label secara bersamaan:

<SSwitch v-model="sm" size="sm" label="Small" />
<SSwitch v-model="md" size="md" label="Medium" />
<SSwitch v-model="lg" size="lg" label="Large" />

Warna

color mengatur warna track/thumb saat checked - unchecked selalu tetap track netral yang sama terlepas dari warna:

<SSwitch v-model="primary" color="primary" label="Primary" />
<SSwitch v-model="success" color="success" label="Success" />
<SSwitch v-model="danger" color="danger" label="Danger" />

Loading

loading menunjukkan spinner di thumb - berguna saat toggle async (API call di balik switch) sedang berlangsung. Ini tidak menyiratkan disabled - gabungkan :loading="x" :disabled="x" jika switch yang sibuk tidak boleh disentuh sementara waktu:

<SSwitch :model-value="enabled" :loading="loading" label="Sync with server" @update:model-value="onUpdate" />

Ikon

checked-icon/unchecked-icon merender di dalam thumb untuk setiap state - berguna ketika pasangan ikon semantik lebih jelas daripada on/off polos:

<SSwitch v-model="airplaneMode" checked-icon="hugeicons:airplane-mode" unchecked-icon="hugeicons:airplane-mode-off" label="Airplane mode" />

Deskripsi

description menambahkan baris kedua yang muted di bawah label - untuk toggle standalone (daftar pengaturan, misalnya) di mana membungkus setiap switch dalam FormField sendiri akan menjadi formalitas yang tidak diperlukan:

<SSwitch v-model="marketing" label="Marketing emails" description="Occasional product updates and offers - unsubscribe any time." />

Integrasi formulir

Bungkus dalam FormField untuk mendapatkan id/name/invalid dan aria-describedby terhubung secara otomatis - invalid fallback ke state FormField sendiri ketika tidak diatur langsung pada switch, dan size juga sama (cocok dengan inheritance RadioGroup).

Aksesibilitas

Switch merender primitif Switch milik Reka UI, jadi semantik aksesibilitas berasal dari sana daripada direimplementasi di sini: role="switch" dengan aria-checked boolean (tid seperti Checkbox, tidak ada state "mixed" ketiga). Ini adalah satu kontrol native-equivalent, jadi hanya satu Tab stop tanpa roving focus untuk dikelola, dan Space men-togglenya - perilaku standar untuk ARIA switch pattern, bukan sesuatu untuk dikonfigurasi di sini.

Custom :ui

Untuk melihat dengan tepat apa yang akan Anda timpa - kelas default untuk setiap slot dan varian - berikut adalah file tema Switch sendiri:

Props

Slots