Airplane Mode

Installation

pnpm dlx kliping@latest add switch

Usage

<script setup lang="ts">
import { Switch } from '@/components/ui/switch'
</script>

<template>
  <Switch />
</template>

Requirements

Semua dipasang otomatis oleh kliping add; tabel ini untuk Anda yang memasang manual atau memeriksa project.

Requirement	Value
Project	Vue 3.5+, Tailwind CSS v4, alias @ — disiapkan kliping init
npm packages	@vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/switch/switch.vue components/ui/switch/index.ts

API Reference

Prop	Type	Default	Description
defaultValue?	boolean	—	The state of the switch when it is initially rendered. Use when you do not need to control its state.
modelValue?	boolean	—	The controlled state of the switch. Can be bind as v-model.
disabled?	boolean	—	When true, prevents the user from interacting with the switch.
id?	string	—	The id of the rendered element.
value?	string	—	The value given as data when submitted with a name.
trueValue?	boolean	—	The value used when the switch is on. Defaults to true.
falseValue?	boolean	—	The value used when the switch is off. Defaults to false.
asChild?	boolean	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our Composition guide for more details.
as?	AsTag | Component	—	The element or component this component should render as. Can be overwritten by asChild.
name?	string	—	The name of the field. Submitted with its owning form as part of a name/value pair.
required?	boolean	—	When true, indicates that the user must set the value before the owning form can be submitted.

Event	Payload	Description
@update:modelValue	[payload: boolean]	Emitted when the value changes.

Slot	Props
#thumb	{ modelValue: boolean; checked: boolean; }

Data attribute	Value
[data-slot]	"switch"

Keyboard Interactions

Perilaku keyboard-nya datang dari primitif Reka UI Switch yang dipakai komponen ini, mengikuti pola WAI-ARIA.

Key	Description
Space	Toggles the component's state.
Enter	Toggles the component's state.

CSS Variables

Token tema yang dibaca komponen ini — ubah nilainya di CSS global (:root dan .dark, lihat Theming) untuk mengubah tampilannya tanpa menyentuh komponennya: --background, --border, --foreground, --input, --primary, --primary-foreground, --ring.

Credits

Berasal dari shadcn-vue (MIT, Copyright (c) 2023 unovue). Rantai lengkapnya di Credits.