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';
</script>

Checkbox item

Props

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

Prop	Type	Default	Description
name	String	Custom checkbox	The name attribute for a checkbox field is used to identify the checkbox within a form.
id	String	ID	The id attribute for a checkbox is used to uniquely identify the checkbox element.
label	String	``	The label prop provides the text for the label.
value	String	``	The value prop provides the value of the checkbox.

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"
  >
    <label for="checkBox2"> Checkbox item with a <strong class="rvc-text-red-500">custom</strong> slot</label>
    <p class="rvc-text-slate-600">
      This is a description for the checkbox item.
    </p>
  </Checkbox>
</template>

Customization with Tailwind CSS

To customize the checkbox styles globally, extend your Tailwind configuration. Example:

// tailwind.config.js
import components from '@robuust-digital/vue-components/tailwind';

export default {
  // ...
  theme: {
    extend: {
      components: (theme) => ({
        checkbox: {          
          '--rvc-checkbox-gap': theme('gap.2'),
          '--rvc-checkbox-font-size': theme('fontSize.base.0'),
          '--rvc-checkbox-font-weight': theme('fontWeight.medium'),
          '--rvc-checkbox-color': theme('colors.slate.950'),
          '--rvc-checkbox-input-size': theme('width.4'),
          '--rvc-checkbox-input-box-shadow': theme('boxShadow.sm'),
          '--rvc-checkbox-input-border-radius': theme('borderRadius.DEFAULT'),
          '--rvc-checkbox-input-border-width': theme('borderWidth.DEFAULT'),
          '--rvc-checkbox-input-border-color': theme('colors.slate.200'),
          '--rvc-checkbox-input-checked-bg-color': theme('colors.indigo.600'),
          '--rvc-checkbox-input-checked-border-color': theme('colors.indigo.600'),
          '--rvc-checkbox-input-checked-icon-color': theme('colors.white'),
        },
      }),
    },
  },
  plugins: [components],
};

Full Tailwind CSS checkbox component configuration options can be found here.

Examples

Default checkbox

Checkbox item

Show code

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

Tailwind Config

Full Tailwind CSS checkbox component configuration options can be found below:

// tailwind.config.js
import components from '@robuust-digital/vue-components/tailwind';

export default {
  // ...
  theme: {
    extend: {
      components: (theme) => ({
        checkbox: {
          // Available variables you can override:
          '--rvc-checkbox-gap': theme('gap.2'),
          '--rvc-checkbox-font-size': theme('fontSize.base.0'),
          '--rvc-checkbox-font-weight': theme('fontWeight.medium'),
          '--rvc-checkbox-color': theme('colors.slate.950'),
          '--rvc-checkbox-input-size': theme('width.4'),
          '--rvc-checkbox-input-box-shadow': theme('boxShadow.sm'),
          '--rvc-checkbox-input-border-radius': theme('borderRadius.DEFAULT'),
          '--rvc-checkbox-input-border-width': theme('borderWidth.DEFAULT'),
          '--rvc-checkbox-input-border-color': theme('colors.slate.200'),
          '--rvc-checkbox-input-checked-bg-color': theme('colors.indigo.600'),
          '--rvc-checkbox-input-checked-border-color': theme('colors.indigo.600'),
          '--rvc-checkbox-input-checked-icon-color': theme('colors.white'),
        },
      }),
    },
  },
  plugins: [components],
};