Checkbox

The checkbox input uses HTML's native checkbox input. It can display one or many options to a user and is a great way to allow users to select multiple items from a list. FormKit supports both single and multiple checkbox inputs.

Single checkbox

By default the checkbox type will render a single checkbox and uses boolean values. In order for a single checkbox to be checked — the current value of the input must match the on-value of that input (by default, a single checkbox uses true as the on-value).

<template>  <FormKit type="form" :actions="false" #default="{ value }">    <FormKit      type="checkbox"      label="Terms and Conditions"      help="Do you agree to our terms of service?"      name="terms"      :value="true"      validation="accepted"      validation-visibility="dirty"    />    <pre wrap>{{ value }}</pre>  </FormKit></template>

{}

Multiple checkboxes

To output multiple checkboxes with a single input use the options prop. Options can be specified 3 ways:

• An array of strings
• An object of value/label pairs
• An array of objects with label and value properties (the same as the select and radio inputs)

The value of a checkbox input with multiple options is an array of the selected values.

Array of strings

The simplest way to provide options is an array of strings. The provided strings will be used for both the label and the value of the option.

<FormKit  v-model="value"  type="checkbox"  label="Toppings"  :options="['Mushrooms', 'Olives', 'Salami', 'Anchovies']"  decorator-icon="happy"  help="Select your pizza toppings"  validation="required|min:3"/><pre wrap>{{ value }}</pre>

[]

Value / Label object

You may also provide the options prop where the keys are values and the values of each property are labels.

<script setup>import { ref, computed } from 'vue'const value = ref([])const sum = computed(() => {  return new Intl.NumberFormat('en-US')    .format(value.value.reduce((sum, price) => Number(price) + sum, 0))})</script><template>  <FormKit    v-model="value"    type="checkbox"    label="Trim extras"    :options="{      650: 'Leather seats ($650)',      1200: 'Sweet rims ($1,200)',      13250: 'Gold leaf ($13,250)',      500: 'Massaging seats ($500)'    }"    help="Configure your car’s trim options"  />  <pre wrap>Extra cost: ${{ sum }}</pre></template>

Extra cost: $0

Array of objects

The most flexible way to define options is by providing an array of objects. The objects must include value and label properties — but may also include a help property as well as an attrs object of additional attributes to apply to each checkbox input tag.

<FormKit  v-model="value"  type="checkbox"  label="Indian food"  :options="[    {      value: 'item-2',      label: 'Bhajji',      help: 'Fried chickpea batter — spicy.',    },    {      value: 'item-55',      label: 'Vada Pav (out of stock)',      help: 'Fried vegetarian dumplings.',      attrs: { disabled: true },    },    {      value: 'item-22',      label: 'Paratha',      help: 'Flatbread layered and pan friend.',    },    {      value: 'item-44',      label: 'Halwa',      help: 'Pudding made with flour.',    },  ]"  help="Select your favorite Indian dishes."/>

Props & Attributes

Sections

The checkbox input has a different construction depending on if it's a single or multiple checkbox.

You can target a specific section of an input using that section's "key", allowing you to modify that section's classes, HTML (via :sections-schema, or content (via slots)). Read more about sections here.

Accessibility

All FormKit inputs are designed with the following accessibility considerations in mind. Help us continually improve accessibility for all by filing accessibility issues here:

Single checkbox accessibility attributes

Multiple checkbox accessibility attributes

Keyboard Interactions