Checkbox

CCheckbox component is used in forms when a user needs to select multiple values from several options.

Native HTML checkboxes are 100% accessible by default, so we used a very common CSS technique to style the checkboxes.

See CCheckbox's accessibility report

The CCheckbox component composes ControlBox, a component we created to make it easy to style an element based on sibling inputs.

Import#

import { CCheckbox, CCheckboxGroup } from "chakra-ui/vue"

Usage#

Basic usage

Editable Example 
<c-checkbox default-is-checked>Checkbox</c-checkbox>

Disabled Checkbox#

Editable Example 
<c-stack spacing="10" is-inline>
  <c-checkbox is-disabled>Checkbox</c-checkbox>
  <c-checkbox is-disabled default-is-checked>
    Checkbox
  </c-checkbox>
</c-stack>

Checkbox with custom color#

You can override the color scheme of the checkbox to any color key specified in $chakra.theme.colors.

Editable Example 
<c-stack spacing="10" isInline>
  <c-checkbox variant-color="red" default-is-checked>
    Checkbox
  </c-checkbox>
  <c-checkbox variant-color="green" default-is-checked>
    Checkbox
  </c-checkbox>
</c-stack>

Checkbox sizes#

Pass the size prop to change the size of the checkbox. Values can be either sm, md or lg.

Editable Example 
<c-stack spacing="10" is-inline>
  <c-checkbox size="sm" variant-color="red" default-is-checked>
    Checkbox
  </c-checkbox>
  <c-checkbox size="md" variant-color="green" default-is-checked>
    Checkbox
  </c-checkbox>
  <c-checkbox size="lg" variant-color="pink" default-is-checked>
    Checkbox
  </c-checkbox>
</c-stack>

Invalid Checkbox#

Editable Example 
<c-box mb="3">
  <c-checkbox is-invalid>Checkbox</c-checkbox>
</c-box>

Indeterminate#

Editable Example 
<template>
  <c-box>
    <c-checkbox
      :is-checked="allChecked"
      :is-indeterminate="isIndeterminate"
      @change="(val, $e) => { checkedItems = [$e.target.checked, $e.target.checked] }"
    >
      Parent Checkbox
    </c-checkbox>
    <c-stack pl="6" mt="1" spacing="1">
      <c-checkbox
        :is-checked="checkedItems[0]"
        @change="(val, $e) => { checkedItems = [$e.target.checked, checkedItems[1]] }"
      >
        Child Checkbox 1
      </c-checkbox>
      <c-checkbox
        :is-checked="checkedItems[1]"
        @change="(val, $e) => { checkedItems = [checkedItems[0], $e.target.checked] }"
      >
        Child Checkbox 2
      </c-checkbox>
    </c-stack>
  </c-box>
</template>

<script>
export default {
  data () {
    return {
      checkedItems: [false, false]
    }
  },
  computed: {
    allChecked () {
      return this.checkedItems.every(Boolean)
    },
    isIndeterminate () {
      return this.checkedItems.some(Boolean) && !this.allChecked
    }
  }
}
</script>

CheckboxGroup#

Chakra exports a CCheckboxGroup component to help manage the checked state of it's children.

Editable Example 
<c-checkbox-group variant-color="green" :default-value="['naruto', 'kakashi']">
  <c-checkbox value="naruto">Naruto</c-checkbox>
  <c-checkbox value="sasuke">Sasuke</c-checkbox>
  <c-checkbox value="kakashi">kakashi</c-checkbox>
</c-checkbox-group>

You can also make checkbox group appear horizontally by passing the isInline prop.

Editable Example 
<c-checkbox-group is-inline spacing="8" variant-color="blue" :default-value="['itachi', 'kisame']">
  <c-checkbox value="itachi">Itachi</c-checkbox>
  <c-checkbox value="madara">Madara</c-checkbox>
  <c-checkbox value="kisame">Kisame</c-checkbox>
</c-checkbox-group>

Props#

CCheckbox Props#

CCheckboxGroup composes CBox so you can pass all CBox props.

NameTypeDefaultDescription
idstringThe id assigned to input field
namestringThe name of the input field in a checkbox (Useful for form submission)
valuestring or numberThe value to be used in the checkbox input. This is the value that will be returned on form submission.
variantColorstringThe color of the checkbox when it's checked. This should be one of the color keys in the theme (e.g."green", "red")
defaultIsCheckedbooleanIf true, the checkbox will be initially checked.
isCheckedbooleanIf true, the checkbox will be checked. You'll need to pass onChange to update its value (since it's now controlled)
isIndeterminatebooleanIf true, the checkbox will be indeterminate. This only affects the icon shown inside checkbox
isFullWidthbooleanIf true, the checkbox should take up the full width of the parent.
sizesm, md, lgmdThe size (width and height) of the checkbox
isDisabledbooleanIf true, the checkbox will be disabled
isInvalidbooleanIf true, the checkbox is marked as invalid. Changes style of the unchecked state.
aria-labelstringAn accessible label for the checkbox in the event there's no visible label or children passed
aria-labelledbystringId that points to the label for the checkbox in the event no children was passed

CCheckbox Events#

NamePayloadDescription
@change`stringnumber`
@blur`stringnumber`
@focus`stringnumber`

CCheckbox Slots#

NameDescription
defaultThe children of the checkbox.

CCheckboxGroup Props#

CCheckboxGroup composes CBox so you can pass all CBox props.

NameTypeDefaultDescription
idstringThe id of the checkbox group.
namestringThe name of the checkbox group. This attribute is
valueArray<Checkbox["value"]>The value of the checkbox group
defaultValueArray<Checkbox["value"]>The initial value of the checkbox group
variantColorstringThe color of the checkbox when it's checked. This should be one of the color keys in the theme (e.g."green", "red")
spacingStyledSystem.MarginProps8pxThe space between each checkbox
sizesm, md, lgmdThe size of the checkbox, it's forwarded to all children checkbox.
isInlinebooleanIf true, the checkboxes will aligned horizontally.

CCheckboxGroup Events#

NamePayloadDescription
@changeArray<CCheckbox["value"]>The callback fired when any children Checkbox is checked or unchecked

CCheckboxGroup Slots#

NameDescription
defaultThe content of the checkbox group. Must be the CCheckbox component

❤️ Contribute to this page

Caught a mistake or want to contribute to the documentation? Edit this page on GitHub!