Checkbox component

The Checkbox component designed with Vue 3 and Tailwind CSS. possibility to add an Label or customize with a custom Slot.

Basic Usage

Import and use Checkbox in your Vue components as follows:

<template>
  <Checkbox
    id="checkBox1"
    v-model="checkbox"
    label="Checkbox item"
    value="Value 1"
    name="Custom Checkbox"
  />
</template>

<script setup>
import { Checkbox } from '@robuust-digital/vue-components/core';
</script>

Checkbox item

Props

Below are the props supported by Checkbox, which allow you to customize its appearance and behavior:

Prop	Type	Default	Description
modelValue	CheckboxModelValue	null	The v-model binding value. Can be boolean, string, number, object, array, or null.
label	String	''	The label text displayed next to the checkbox.
rootClass	String	''	Additional CSS classes to apply to the root label element.

Note: Standard HTML input attributes (like id, name, value, disabled, etc.) are passed through via v-bind="$attrs".

Slots

Below is example to edit the custom slot of Checkbox:

Checkbox with a custom slot

Checkbox item with a custom slot

This is a description for the checkbox item.

Show code

<template>
  <Checkbox
    id="checkBox2"
    v-model="checkbox"
    type="checkbox"
    value="Value 2"
    name="Custom Checkbox"
  >
    <span> Checkbox item with a <strong class="text-red-500">custom</strong> slot</span>
    <p class="text-slate-600">
      This is a description for the checkbox item.
    </p>
  </Checkbox>
</template>

Examples

Default checkbox

Checkbox item

Show code

<template>
  <Checkbox
    id="checkBox1"
    v-model="checkbox"
    label="Checkbox item"
    value="Value 1"
    name="Custom Checkbox"
  />
</template>

Refs

The Checkbox component's native HTML <input type="checkbox"> element can be accessed using a template ref combined with a ref. This allows you to call native checkbox methods or set properties directly:

<template>
  <Checkbox ref="checkboxRef" />
</template>

<script setup>
import { ref, onMounted } from 'vue';

const checkboxRef = ref();

onMounted(() => {
  // Access the native checkbox element
  const nativeCheckbox = checkboxRef.value.$refs.input;
  
  nativeCheckbox.focus(); // Focus the checkbox
});
</script>

CSS Customization ⚡️

To customize the checkbox styles global

:root {
  /* Base Checkbox variables */
  --rvc-checkbox-input-box-shadow: var(--rvc-base-box-shadow);
  --rvc-checkbox-input-border-color: var(--rvc-base-border-color);
  --rvc-checkbox-gap: calc(var(--spacing) * 2);
  --rvc-checkbox-font-size: var(--text-base);
  --rvc-checkbox-font-weight: var(--font-weight-medium);
  --rvc-checkbox-color: var(--color-slate-950);
  --rvc-checkbox-input-bg-color: var(--rvc-base-input-bg-color);
  --rvc-checkbox-input-bg-color-disabled: var(--rvc-base-input-bg-color-disabled);
  --rvc-checkbox-input-disabled-opacity: var(--rvc-base-input-disabled-opacity);
  --rvc-checkbox-input-size: calc(var(--spacing) * 4);
  --rvc-checkbox-input-border-radius: var(--radius-sm);
  --rvc-checkbox-input-border-width: 1px;
  --rvc-checkbox-input-checked-bg-color: var(--color-indigo-600);
  --rvc-checkbox-input-checked-border-color: var(--color-indigo-600);
  --rvc-checkbox-input-checked-icon-color: var(--color-white);
}