Checkbox Component Demo

This page demonstrates the Checkbox component with the latest API surface, covering basic usage, sizing, variants, states, select-all workflows, and slot customization.

Basic Checkbox

A single checkbox bound to an array via v-model.

<template>
  <OCheckbox v-model="selectedOptions" label="Option 1" value="option1" />
</template>

<script setup>
import { ref } from "vue";

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

Option 1

Checkbox Sizes

All available size options in a vertical stack.

<template>
  <div class="checkbox-size-demo">
    <OCheckbox
      v-for="size in sizes"
      :key="size.value"
      v-model="selected"
      :label="size.label"
      :value="size.value"
      :size="size.value"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";

const sizes = [
  { label: "Extra Small", value: "xs" },
  { label: "Small", value: "sm" },
  { label: "Medium", value: "md" },
  { label: "Large", value: "lg" },
  { label: "Extra Large", value: "xl" },
];

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

<style scoped>
.checkbox-size-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
</style>

Extra Small

Small

Medium

Large

Extra Large

Variant Styles

Use the variant prop to switch between the styles shipped with the component.

<template>
  <div class="variant-demo">
    <OCheckbox
      v-model="selected"
      label="Default Variant"
      value="default"
      variant="default"
    />
    <OCheckbox
      v-model="selected"
      label="Success Variant"
      value="success"
      variant="success"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";

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

Default Variant

Success Variant

Disabled and Readonly States

Prevent user interaction while still rendering the checkbox for context.

<template>
  <div class="state-demo">
    <OCheckbox label="Normal" value="normal" v-model="selected" />
    <OCheckbox
      label="Disabled (unchecked)"
      value="disabled-unchecked"
      disabled
    />
    <OCheckbox
      label="Disabled (checked)"
      value="disabled-checked"
      :disabled="true"
      :modelValue="['disabled-checked']"
    />
    <OCheckbox
      label="Readonly (unchecked)"
      value="readonly-unchecked"
      readonly
    />
    <OCheckbox
      label="Readonly (checked)"
      value="readonly-checked"
      :readonly="true"
      :modelValue="['readonly-checked']"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";

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

Normal

Disabled (unchecked)

Disabled (checked)

Readonly (unchecked)

Readonly (checked)

Select All Functionality

Combine allItems, valueKey, and the special selectAll value to add a “Select All” option to a list.

<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 class="selected-value">
      Selected items: {{ selectedIds.join(", ") || "none" }}
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";

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

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

<style scoped>
.select-all-demo {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.selected-value {
  margin-top: 16px;
  padding: 8px;
  background-color: #f5f5f5;
  border-radius: 4px;
}
</style>

Select All

Item 1

Item 2

Item 3

Selected items: 1, 2, 3

Custom Icon Slot

Use the icon slot to render your own checkmark UI.

<template>
  <OCheckbox v-model="selected" value="custom" label="Custom Icon">
    <template #icon="{ props }">
      <span class="custom-icon" :class="{ checked: props.isChecked }"> ✓ </span>
    </template>
  </OCheckbox>
</template>

<script setup>
import { ref } from "vue";

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

<style scoped>
.custom-icon {
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid #000;
  border-radius: 0.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: background-color 0.2s, color 0.2s;
}

.custom-icon.checked {
  background-color: #000;
  color: #fff;
}
</style>

✓ Custom Icon