Logo

Midnight Owl UI

Checkbox

Stable v1.0.2

A checkbox that works the way you would expect in a form: single booleans, arrays for group selections, an indeterminate state, and custom values when true/false isn't enough.

Interactive Playground

Experiment with states, sizes, and themes for the Checkbox component.

Configuration
Small (sm)
Primary
Value Mapping

Changes the underlying bound value emitted by the v-model instead of strictly using booleans.

States
v-model: "yes"
Live Source Code
<Checkbox
  v-model="isChecked"
  id="acknowledge-terms-checkbox"
  label="Acknowledge Terms & Conditions"
  trueValue="yes"
  falseValue="no"
/>

Implementation Examples

Select Routing Ports
Value: [ "manila", "cebu" ]

1. Vue Array Binding

By binding the exact same array to multiple checkboxes with different value props, Vue manages the insertions and removals automatically. 

<Checkbox
  v-for="port in portOptions"
  :key="port.value"
  v-model="selectedPorts"
  :value="port.value"
  :label="port.label"
/>

2. Parent Indeterminate State

Using a writable computed property to "Select All" alongside the indeterminate prop accurately reflects partial checklist completion. 

<Checkbox
  v-model="isAllTasksSelected"
  :indeterminate="computedIsIndeterminate"
  label="Select All Tasks"
/>

<Checkbox v-model="taskItems" value="design" label="UI/UX Design" />
<Checkbox v-model="taskItems" value="develop" label="Frontend Development" />
<Checkbox v-model="taskItems" value="test" label="Quality Assurance" />
<Checkbox v-model="taskItems" value="deploy" label="Server Deployment" />
Current Value: "yes"

3. Custom True/False Values

Instead of standard booleans, you can map the checked/unchecked states to specific strings, numbers, or objects using the trueValue and falseValue props. 

<Checkbox
  v-model="subscribed"
  trueValue="yes"
  falseValue="no"
  label="Subscribe to Monthly Newsletter"
  variant="success"
  size="md"
/>

API Reference

Props

Name
Type
Default
Description
v-model
any
false
The bound value. Supports standard booleans, native array binding for groups, or custom mapped types.
id
string
undefined
Overrides the auto-generated id applied to the underlying input element and its label.
value
any
undefined
The exact value appended to the bound array when v-model is an array.
trueValue
any
true
The custom value assigned to the v-model when the checkbox is checked.
falseValue
any
false
The custom value assigned to the v-model when the checkbox is unchecked.
label
string
undefined
The text label displayed next to the checkbox.
indeterminate
boolean
false
Forces a visually indeterminate state (minus icon) without mutating the bound value.
size
"xs" | "sm" | "md" | "lg" | "xl"
"sm"
Dimensional size of the component icon and text.
variant
string
"primary"
Color theme applied to the checked/indeterminate icon.
disabled
boolean
false
Disables user interaction and lowers opacity.
required
boolean
false
Appends a red asterisk to the label.
error
string | boolean | string[]
false
Applies red error styling and displays error message(s) below the checkbox.

Events

Event Name
Payload Signature
Description
@change
(value: any, event: Event)
Fired when the checkbox state changes. Emits the newly bound value and the native DOM event.