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
With input
Each step sits directly below a mono-input of the same size, which is where a mismatch shows up first. The box tracks the shared --theme-control-height-* token at half height, and the label, description and gap scale with it.
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
CSS Variables
Vue SFC
Every checkbox is themed through --mono-checkbox-* custom properties. Setting one on the element, on any wrapper/ancestor, or inline all work — custom properties inherit, and they pierce the shadow-DOM boundary, so the same overrides apply to <mono-checkbox> and the shadow build. The color prop sets the accent, but an explicit --mono-checkbox-accent override always wins. To re-skin globally, set the underlying --theme-* tokens — they feed the defaults below.
| Variable | Default | Controls |
|---|---|---|
--mono-checkbox-accent | --theme-primary | Box fill/border when checked (set by color) |
--mono-checkbox-bg | #ffffff | Box background when unchecked |
--mono-checkbox-border | theme border mix | Box border color |
--mono-checkbox-border-hover | primary mix | Box border on hover |
--mono-checkbox-icon | #ffffff | Check / indeterminate glyph color |
--mono-checkbox-ring | primary 20% | Focus-visible ring color |
--mono-checkbox-shadow | 0 1px 2px … | Box shadow |
--mono-checkbox-text | --theme-text | Label text color |
--mono-checkbox-description | #6b7280 | Description text color |
--mono-checkbox-radius | 25% | Box corner radius — a percentage, so it scales with size and never rounds into a circle. Absolute lengths (4px) also work. |
--mono-checkbox-border-width | 2px (1.5px at xs/sm) | Box border width |
--mono-checkbox-gap | 0.75rem at md, 0.375rem → 1.125rem across the scale | Gap between box and label |
The box itself is not a variable: it is always half of --theme-control-height-* for the current size, so a checkbox stays proportional to an input or select beside it. Retune that token and the checkbox follows. Label and description sizes track --theme-title-font-* / --theme-subtitle-font-* per step.
Types
Import
import { CheckboxProps } from 'mono-helper'| Prop | Value | Default | Description |
|---|---|---|---|
modelValue | boolean | — | Bound checked state of the checkbox. |
checked | boolean | — | Whether the checkbox is checked. |
color | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | — | Color theme of the checkbox. |
size | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl' | — | Visual size of the checkbox. |
disabled | boolean | — | Disables interaction and dims the checkbox. |
indeterminate | boolean | — | 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. |
visible | boolean | — | Whether the control is shown. Defaults to `true`. |
visibleType | 'invisible' | 'none' | — | How it hides when `visible` is `false`. Defaults to `'none'`. |