> ## Documentation Index
> Fetch the complete documentation index at: https://docs.velure.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Checkbox Input

> InputCheckbox.vue Component Documentation

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

<CardGroup cols={2}>
  <Card title="Partial State" icon="square-1">
    Allows for a "partially selected" visual state.
  </Card>

  <Card title="Dynamic Labeling" icon="square-2">
    Accepts a <code>label</code> prop or slot content for flexible customization.
  </Card>

  <Card title="Custom Values" icon="square-3">
    Supports various truthy/falsey values (<code>yes</code>, <code>on</code>, <code>true</code>, etc.).
  </Card>
</CardGroup>

***

## Usage

### Basic Example

```js theme={null}
import { InputCheckbox } from '@robojuice/velure-ui';
```

```vue theme={null}
<InputCheckbox v-model="model" label="Checkbox label" />
```

### Disabled Checkbox with Slot Content override

```vue theme={null}
<InputCheckbox disabled="disabled" label="Checkbox 0">
  Checkbox slot content
</InputCheckbox>
```

***

## Props

<ParamField path="v-model" type="string | number | object | boolean" default="undefined">
  The value bound to the checkbox's state (`true`, `false`, `'yes'`, `1`, and `'on'`).
</ParamField>

<ParamField path="width" type="number" default="100">
  The width of the component as a percentage.
</ParamField>

<ParamField path="label" type="string" default="''">
  The text label displayed next to the checkbox.
</ParamField>

<ParamField path="partial" type="boolean" default="false">
  Indicates whether the checkbox is in a "partially selected" state.
</ParamField>

<ParamField path="disabled" type="boolean" default="false">
  Indicates whether the checkbox is disabled.
</ParamField>

***

## Example Use Cases

### Reactive Checkbox

Use `v-model` to bind the checkbox state reactively:

```vue theme={null}
<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):

```vue theme={null}
<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.