Checkbox API Reference

Props

Prop	Type	Default	Description
size	String	'md'	Visual size. Options: 'xs', 'sm', 'md', 'lg', 'xl'.
disabled	Boolean	false	Disables user interaction and lowers opacity.
readonly	Boolean	false	Prevents changes while keeping the default appearance.
label	String	''	Text displayed by the default label slot.
value	String/Number/Boolean	Required	Primitive value emitted when toggled.
modelValue	Array	[]	Main two-way binding (use v-model) containing the selected values array.
selected	Array	[]	Optional controlled array; used when modelValue is not provided.
valueComparator	Function	(array, value) => Array.isArray(array) && array.includes(value)	Custom comparator for complex data structures.
variant	String	'default'	Visual variant class (e.g. 'default', 'success').
allItems	Array	[]	Full dataset leveraged when a checkbox acts as a “Select All” control.
valueKey	String	''	Property name to read from allItems objects to derive primitive values.

Events

Event	Payload	Description
update:modelValue	newValues	Emitted with the updated array whenever the selection changes.
change	newValues, toggledValue, event	Fires alongside update:modelValue and passes the toggled value plus the original DOM event.

Slots

Slot	Props	Description
icon	{ isChecked }	Replaces the default checkbox icon.
label	{ isChecked }	Custom label content.

Methods

The component doesn't expose any methods via template refs.

Example Usage

Basic Usage

<template>
  <OCheckbox v-model="selected" label="Subscribe to updates" value="updates" />
</template>

<script setup>
import { ref } from "vue";
import { OCheckbox } from "your-component-library";

const selected = ref([]);
</script>

Checkbox Group

<template>
  <div class="checkbox-group">
    <OCheckbox
      v-for="option in options"
      :key="option.value"
      v-model="selectedOptions"
      :label="option.label"
      :value="option.value"
      size="md"
    />
  </div>

  <div>Selected: {{ selectedOptions.join(", ") }}</div>
</template>

<script setup>
import { ref } from "vue";
import { OCheckbox } from "your-component-library";

const options = [
  { label: "Email", value: "email" },
  { label: "SMS", value: "sms" },
  { label: "Push", value: "push" },
];

const selectedOptions = ref([]);
</script>

Select All Toggle

<template>
  <div class="select-all-demo">
    <OCheckbox
      v-model="selectedIds"
      label="Select All"
      value="selectAll"
      :allItems="items"
      valueKey="id"
    />

    <OCheckbox
      v-for="item in items"
      :key="item.id"
      v-model="selectedIds"
      :label="item.name"
      :value="item.id"
    />

    <div>Selected IDs: {{ selectedIds.join(", ") }}</div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { OCheckbox } from "your-component-library";

const items = [
  { id: 1, name: "Item 1" },
  { id: 2, name: "Item 2" },
  { id: 3, name: "Item 3" },
];

const selectedIds = ref([]);
</script>