OcCheckbox component

Description

The OcCheckbox component represents a simple checkbox input element that can either be checked or unchecked.

Accessibility

The label is required and represents the name of the input. If label-hidden is set to true, the label will be hidden from the screen but still be available for screen readers via the aria-label attribute.

Examples

Default

The default use case needs a label and a v-model to bind the value of the checkbox.

<template>
  <oc-checkbox v-model="inputValue" label="Some checkbox" />

  <p>Checked: {{ inputValue }}</p>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const inputValue = ref(false)
</script>

Sizes

The checkbox can be displayed in three different sizes: small, medium, and large.

<div class="oc-mb-s">
  <oc-checkbox label="Small checkbox" size="small" />
</div>
<div class="oc-mb-s">
  <oc-checkbox label="Medium checkbox" size="medium" />
</div>
<div class="oc-mb-s">
  <oc-checkbox label="Large checkbox" size="large" />
</div>

Properties

Emits

Slots