GitHub54X

Checkbox

Vue checkbox for boolean and indeterminate selections in forms, filters, and multi-select lists.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/checkbox.json

Usage

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

<template>
  <Checkbox.Root>
    <!-- … -->
  </Checkbox.Root>
</template>

Composition

      
      Checkbox.Root
├── Checkbox.Context
├── Checkbox.Control
├── Checkbox.Group
├── Checkbox.GroupProvider
├── Checkbox.HiddenInput
├── Checkbox.Indicator
├── Checkbox.Label
├── Checkbox.RootProvider

Examples

Default Checked

Use the defaultChecked prop to set the initial checked state in an uncontrolled manner. The checkbox will manage its own state internally.

Controlled

Use the checked and @checked-change props to programmatically control the checkbox's state.

Root Provider

An alternative way to control the checkbox is to use the RootProvider component and the useCheckbox hook. This way you can access the state and methods from outside the component.

Disabled

Use the disabled prop to make the checkbox non-interactive.

Indeterminate

Use the indeterminate prop to create a checkbox in an indeterminate state (partially checked).

Checkbox Group

Use the Checkbox.Group component to manage a group of checkboxes. The Checkbox.Group component manages the state of the checkboxes and provides a way to access the checked values.

Group Controlled

Use v-model (or the model-value prop with the @value-change event) to programmatically control the checkbox group's state. This example demonstrates how to manage selected checkboxes in an array and display the current selection.

Group Provider

Use the useCheckboxGroup hook to create the checkbox group store and pass it to the Checkbox.GroupProvider component. This provides maximum control over the group programmatically, similar to how RootProvider works for individual checkboxes.

Invalid

Use the invalid prop on Checkbox.Group to mark the entire group as invalid for validation purposes. This applies the invalid state to all checkboxes within the group.

Max Selected

Use the maxSelectedValues prop to limit the number of checkboxes that can be selected at once. Once the maximum is reached, remaining checkboxes become disabled.

Select All

Implement a "select all" checkbox that controls all checkboxes within a group. The parent checkbox automatically shows an indeterminate state when some (but not all) items are selected, and becomes fully checked when all items are selected.

API

See Ark UI Checkbox docs for full props and examples.

CarouselClipboard