Checkbox
A control for boolean / multi-state selection. Toggle Vue / CSS to switch the live demo and source together.
Basic
Default checkbox; optional label and description.
Vue SFC
States
Disabled, pre-checked and indeterminate states.
Vue SFC
Sizes
Small, medium and large.
Vue SFC
Colors
All built-in color variants.
Vue SFC
Group
Simple group layout.
Vue SFC
Slots
Custom label/description via slots.
Vue SFC
Event: change
Listen for change events.
Vue SFC
Controlled
Drive the value imperatively.
Vue SFC
Indeterminate toggle
Toggle the indeterminate flag.
Vue SFC
Select-all group
Master checkbox + members.
Vue SFC
Event log
Live log of emitted events.
Vue SFC
Customized
Custom checkbox with advanced styling.
Vue SFC
Types
Import
import { CheckboxProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
modelValue | boolean | false | Bound checked state of the checkbox. |
checked | boolean | false | Whether the checkbox is checked. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'primary' | Color theme of the checkbox. |
size | 'sm' | 'md' | 'lg' | 'md' | Visual size of the checkbox. |
disabled | boolean | false | Disables interaction and dims the checkbox. |
indeterminate | boolean | false | Shows the indeterminate (mixed) state. |
label | string | '' | Label text shown next to the checkbox. |
description | string | '' | Secondary description text shown under the label. |
value | string | '' | Form value submitted when checked. |
name | string | '' | Form field name of the checkbox. |
ariaLabelText | string | — | Accessible label text for screen readers. |
cssClass | CheckboxCssClass | {} | Per-element class overrides. |