Installation

pnpm dlx kliping@latest add toggle

Usage

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

<template>
  <Toggle>Toggle</Toggle>
</template>

Examples

Bawaan

Outline

Dengan Teks

Kecil

Besar

Nonaktif

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, class-variance-authority@^0.7.1, reka-ui@^2.10.3
Files	components/ui/toggle/toggle.vue components/ui/toggle/index.ts

API Reference

Prop	Type	Default	Description
defaultValue?	boolean	—	The pressed state of the toggle when it is initially rendered. Use when you do not need to control its open state.
modelValue?	boolean	—	The controlled pressed state of the toggle. Can be bind as v-model.
disabled?	boolean	false	When true, prevents the user from interacting with the toggle.
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.
variant?	"default" | "outline"	"default"	The visual style.
size?	"default" | "sm" | "lg"	"default"	The visual size.

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

Slot	Props
#default	{ modelValue: boolean; state: DataState; pressed: boolean; disabled: boolean; }

Data attribute	Value
[data-slot]	"toggle"

CSS Variables

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

Credits

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