# Vue Checkbox Component

> Create consistent cross-browser and cross-device checkboxes with our Vue checkbox components.

## Approach

Browser default checkboxes are replaced with the help of `<CFormCheck>`. Checkboxes are for selecting one or several options in a list.

## Checks

```html
<template>
  <CFormCheck id="flexCheckDefault" label="Default checkbox" />
  <CFormCheck id="flexCheckChecked" label="Checked checkbox" checked />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>

### vModel

Single checkbox, boolean value.

```html
<template>
  <CFormCheck id="flexCheckDefaultVModel" label="Default checkbox" v-model="checked" />
  <div>Checked: {{ checked }}</div>
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>

We can also bind multiple checkboxes to the same array.

```html
<template>
  <CFormCheck id="lucas" value="Lucas" label="Lucas" v-model="checkedNames" />
  <CFormCheck id="andrew" value="Andrew" label="Andrew" v-model="checkedNames" />
  <CFormCheck id="anna" value="Anna" label="Anna" v-model="checkedNames" />
  <div>Checked names: {{ checkedNames }}</div>
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>

## Indeterminate

Checkboxes can utilize the `:indeterminate` pseudo-class when manually set via `indeterminate` property.

```html
<template>
  <CFormCheck id="flexCheckIndeterminate" label="Indeterminate checkbox" indeterminate />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>

### Disabled

Add the `disabled` attribute and the associated `<label>`s are automatically styled to match with a lighter color to help indicate the input's state.

```html
<template>
  <CFormCheck label="Disabled checkbox" disabled />
  <CFormCheck label="Disabled checked checkbox" checked disabled />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>

## Default (stacked)

By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced.

```html
<template>
  <CFormCheck id="defaultCheck1" label="Default checkbox" />
  <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>

## Inline

Group checkboxes on the same horizontal row by adding `inline` boolean property to any `<CFormCheck>`.

```html
<template>
  <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
  <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
  <CFormCheck inline id="inlineCheckbox3" value="option3" label="3 (disabled)" disabled />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>

## Reverse 

Put your checkboxes on the opposite side by adding `reverse` boolean property.

```html
<template>
  <CFormCheck reverse id="reverseCheckbox1" value="option1" label="Reverse checkbox" />
  <CFormCheck
    reverse
    id="reverseCheckbox2"
    value="option2"
    label="Disabled reverse checkbox"
    disabled
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>

## Without labels

Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).

```html
<template>
  <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>

## Toggle buttons

Create button-like checkboxes buttons by using `button` boolean property on the `<CFormCheck>` component. These toggle buttons can further be grouped in a button group if needed.

```html
<template>
  <CFormCheck
    :button="{ color: 'primary' }"
    id="btn-check"
    autocomplete="off"
    label="Single toggle"
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>

```html
<template>
  <CFormCheck
    :button="{ color: 'primary' }"
    id="btn-check-2"
    autocomplete="off"
    label="Checked"
    checked
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>

```html
<template>
  <CFormCheck
    :button="{ color: 'primary' }"
    id="btn-check-3"
    autocomplete="off"
    label="Disabled"
    disabled
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>

### Outlined styles

Different variants of button, such at the various outlined styles, are supported.

```html
<template>
  <CFormCheck
    :button="{ color: 'primary', variant: 'outline' }"
    id="btn-check-outlined"
    autocomplete="off"
    label="Single toggle"
  />
  <CFormCheck
    :button="{ color: 'secondary', variant: 'outline' }"
    id="btn-check-2-outlined"
    autocomplete="off"
    label="Checked"
    checked
  />
</template>

<script setup>
import { CFormCheck } from '@coreui/vue'
import { ref } from 'vue'
const checked = ref(true)
const checkedNames = ref(['Andrew'])
</script>
```
  
</Example>