Checkbox

Checkboxes let users pick one or more options from a list, or flip a single boolean on or off. Reach for a checkbox when the choice does not take effect until the user explicitly submits -- for instant toggles, consider a Switch instead.

import { CoarCheckbox } from '@cocoar/vue-ui';

Basic Usage

Bind a boolean with v-model and provide a label. That is all you need for a working checkbox.

Accept terms and conditions

Checked: false

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <CoarCheckbox v-model="checked" label="Accept terms and conditions" />
    <span style="font-size: 13px; color: #64748b;">Checked: {{ checked }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CoarCheckbox } from '@cocoar/vue-ui';

const checked = ref(false);
</script>

States

Checkboxes support required, disabled, and error states, giving you full control over form validation flows.

Required checkbox *

Disabled (checked)

Disabled (unchecked)

With error

This field is required

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <CoarCheckbox v-model="required" label="Required checkbox" :required="true" />
    <CoarCheckbox :model-value="true" label="Disabled (checked)" :disabled="true" />
    <CoarCheckbox :model-value="false" label="Disabled (unchecked)" :disabled="true" />
    <CoarFormField error="This field is required">
      <CoarCheckbox :model-value="false" label="With error" />
    </CoarFormField>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CoarCheckbox, CoarFormField } from '@cocoar/vue-ui';

const required = ref(false);
</script>

Indeterminate

The indeterminate state shows a dash instead of a checkmark -- handy for "select all" controls where only some children are checked.

Select all (partial)

vue

<template>
  <div>
    <CoarCheckbox v-model="checked" :indeterminate="true" label="Select all (partial)" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { CoarCheckbox } from '@cocoar/vue-ui';

const checked = ref(false);
</script>

Sizes

Four sizes to match different information densities, from compact data tables to spacious settings pages.

Small checkbox

Medium checkbox (default)

Large checkbox

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <CoarCheckbox :model-value="true" size="s" label="Small checkbox" />
    <CoarCheckbox :model-value="true" size="m" label="Medium checkbox (default)" />
    <CoarCheckbox :model-value="true" size="l" label="Large checkbox" />
  </div>
</template>

<script setup lang="ts">
import { CoarCheckbox } from '@cocoar/vue-ui';
</script>

Hint Text

Wrap in CoarFormField with a hint prop to give users extra context without cluttering the label itself.

Subscribe to newsletter

Receive weekly updates about new features.

Enable analytics

Help us improve the product by sharing usage data.

vue

<template>
  <div style="display: flex; flex-direction: column; gap: 8px;">
    <CoarFormField hint="Receive weekly updates about new features.">
      <CoarCheckbox :model-value="false" label="Subscribe to newsletter" />
    </CoarFormField>
    <CoarFormField hint="Help us improve the product by sharing usage data.">
      <CoarCheckbox :model-value="false" label="Enable analytics" />
    </CoarFormField>
  </div>
</template>

<script setup lang="ts">
import { CoarCheckbox, CoarFormField } from '@cocoar/vue-ui';
</script>

Without Label

For table rows or tight custom layouts you can omit the visible label -- just make sure to pass an aria-label so the checkbox remains accessible.

vue

<template>
  <div style="display: flex; gap: 16px; align-items: center;">
    <CoarCheckbox :model-value="false" aria-label="Select row 1" />
    <CoarCheckbox :model-value="true" aria-label="Select row 2" />
    <CoarCheckbox :model-value="false" :indeterminate="true" aria-label="Select all" />
  </div>
</template>

<script setup lang="ts">
import { CoarCheckbox } from '@cocoar/vue-ui';
</script>

Accessibility

Keyboard Navigation

Key	Action
Tab	Move focus to checkbox
Space	Toggle checked state

INFO

The indeterminate state is visual only. Clicking an indeterminate checkbox toggles it to checked. Always provide aria-label when no visible label is used.

Screen Reader Support

• Label text or aria-label announces on focus
• Checked / unchecked state communicated
• Required and error states announced
• Hint text accessible via aria-describedby

API

Props

Prop	Type	Default	Description
v-model	boolean	false	Checked state
label	string	''	Label text
error	boolean	false	Error state (auto-injected from CoarFormField)
size	'xs' | 's' | 'm' | 'l'	'm'	Checkbox size
indeterminate	boolean	false	Show indeterminate (dash) state
disabled	boolean	false	Disable the checkbox
required	boolean	false	Mark as required