Checkbox Component

A customizable checkbox component with support for multiple selection and select all functionality.

Overview

The Checkbox component provides:

• Traditional checkbox functionality
• Support for multiple selection
• Built-in select-all behavior powered by allItems and valueKey
• Customizable size and variant-based appearance
• Accessible design with proper ARIA attributes

When to Use

Use the Checkbox component when you need to:

• Allow users to select multiple options from a list
• Create custom checkbox designs
• Implement checkbox groups
• Provide a consistent selection experience
• Add select all functionality to a group of options

Key Features

• Multiple Sizes: Choose from xs, sm, md, lg, and xl.
• Variants: Apply library-provided variants (such as default and success) via the variant prop.
• Multiple Selection: Built-in array-based v-model support for selecting multiple options.
• Select All: Opt-in “Select All” checkbox that syncs with every item using allItems/valueKey.
• Disabled & Readonly States: Prevent interaction or changes while keeping visuals intact.
• Custom Icons & Labels: Override the default checkbox and label through dedicated slots.
• Value Comparator: Supply a custom comparator when working with non-primitive values.

API Reference →

View Code →