Checkbox

A control that allows the user to toggle between checked and not checked.

Accept terms and conditions

Installation

npx shadcn-vue@latest add https://vuedocs.canceydejean.dev/r/checkbox.json

Usage

Use checkboxes for multi-select options, settings, and form field toggles.

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

<template>
  <div class="flex items-center gap-2">
    <Checkbox id="terms" />
    <label for="terms">Accept terms and conditions</label>
  </div>
</template>

Supports controlled/uncontrolled checked state (v-model:checked), disabled, and aria-invalid styling for form errors. Built on reka-ui's Checkbox primitive.