Accept terms and conditions

Accept terms and conditions

By clicking this checkbox, you agree to the terms and conditions.

Enable notifications

Enable notifications

You can enable or disable notifications at any time.

Installation

pnpm dlx kliping@latest add checkbox

Usage

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

<template>
  <Checkbox />
</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	@lucide/vue@^1.31.0, @vueuse/core@^14.4.0, reka-ui@^2.10.3
Files	components/ui/checkbox/checkbox.vue components/ui/checkbox/index.ts

API Reference

Prop	Type	Default	Description
defaultValue?	boolean | "indeterminate"	—	The value of the checkbox when it is initially rendered. Use when you do not need to control its value.
modelValue?	boolean | "indeterminate"	—	The controlled value of the checkbox. Can be binded with v-model.
disabled?	boolean	—	When true, prevents the user from interacting with the checkbox
value?	AcceptableValue	—	The value given as data when submitted with a name.
id?	string	—	Id of the element
trueValue?	boolean	—	The value used when the checkbox is checked. Defaults to true.
falseValue?	boolean	—	The value used when the checkbox is unchecked. 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	[value: boolean | "indeterminate"]	Emitted when the value changes.

Slot	Props
#default	{ modelValue: boolean | "indeterminate"; state: CheckedState; }

Data attribute	Value
[data-slot]	"checkbox"

Keyboard Interactions

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

Key	Description
Space	Checks/unchecks the checkbox

CSS Variables

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

Credits

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