Skip to main content
The InputCheckbox.vue component is a reusable Vue.js Composition API-based checkbox component. It supports two-way data binding with v-model, customizable labels, partial states, and slots for dynamic content.

​
Features

Partial State

Allows for a “partially selected” visual state.

Dynamic Labeling

Accepts a label prop or slot content for flexible customization.

Custom Values

Supports various truthy/falsey values (yes, on, true, etc.).

​
Usage

​
Basic Example

import { InputCheckbox } from '@robojuice/velure-ui';

<InputCheckbox v-model="model" label="Checkbox label" />

​
Disabled Checkbox with Slot Content override

<InputCheckbox disabled="disabled" label="Checkbox 0">
  Checkbox slot content
</InputCheckbox>

​
Props

​
v-model
string | number | object | boolean
default:"undefined"
The value bound to the checkbox’s state (true, false, 'yes', 1, and 'on').
​
width
number
default:"100"
The width of the component as a percentage.
​
label
string
default:"''"
The text label displayed next to the checkbox.
​
partial
boolean
default:"false"
Indicates whether the checkbox is in a “partially selected” state.
​
disabled
boolean
default:"false"
Indicates whether the checkbox is disabled.

​
Example Use Cases

​
Reactive Checkbox

Use v-model to bind the checkbox state reactively: 
<template>
  <InputCheckbox v-model="checkboxState" label="Checkbox State" />
</template>

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

const checkboxState = ref(true);
</script>

​
Partial Checkbox State

Set a checkbox to a partially selected state (dish icon): 
<InputCheckbox :partial="true" label="Partially Selected" />

​
Notes

  • The partial state provides a visual indication of an indeterminate or partially selected checkbox.
  • The label prop is optional and can be replaced by slot content for custom labels or additional markup.
  • Supports flexible truthy/falsey values for compatibility with diverse use cases.