Checkbox

Two-state or indeterminate checkbox input for binary selection.

Open in Storybook

Interactive Demo

Usage

<script setup>
import { ref } from 'vue';
import { Checkbox } from '@yellowcard/b2b-design-system';

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

<template>
  <Checkbox v-model="agreed" ariaLabel="I agree to the terms" />
</template>

API Reference

Props

Prop	Type	Default	Description
modelValue	boolean	—	Checked state (v-model)
size	string	—	Checkbox size
disabled	boolean	false	Disabled state
ariaLabel	string	—	Accessible label
ariaDescribedby	string	—	ID of describing element

Events

Event	Payload	Description
update:modelValue	boolean	Emitted when checked state changes