InputCheckbox.vue component is a reusable Vue.js Composition API-based checkbox component. It supports two-way data binding with v-model, customizable labels, partial states, and slots for dynamic content.
Features
Partial State
Allows for a “partially selected” visual state.
Dynamic Labeling
Accepts a
label prop or slot content for flexible customization.Custom Values
Supports various truthy/falsey values (
yes, on, true, etc.).Usage
Basic Example
Disabled Checkbox with Slot Content override
Props
string | number | object | boolean
default:"undefined"
The value bound to the checkbox’s state (
true, false, 'yes', 1, and 'on').number
default:"100"
The width of the component as a percentage.
string
default:"''"
The text label displayed next to the checkbox.
boolean
default:"false"
Indicates whether the checkbox is in a “partially selected” state.
boolean
default:"false"
Indicates whether the checkbox is disabled.
Example Use Cases
Reactive Checkbox
Usev-model to bind the checkbox state reactively:
Partial Checkbox State
Set a checkbox to a partially selected state (dish icon):Notes
- The
partialstate provides a visual indication of an indeterminate or partially selected checkbox. - The
labelprop is optional and can be replaced by slot content for custom labels or additional markup. - Supports flexible truthy/falsey values for compatibility with diverse use cases.