Checkbox is a control that allows to select binary state, either checked or unchecked. Also, it can support indeterminate state, which is used to represent a checkbox with a state that is neither checked nor unchecked. Used in cases where a list of two or more parameters is mutually exclusive, that is, the user can select only one parameter.
Basic usage
value: false
Source code
vue
<script setup>
import { reactive, ref } from 'vue';
import AcvCheckbox from '@/components/checkbox/checkbox.vue';
const isAgreed = ref(false);
const checked = reactive([true, false, true, false]);
</script>
<template>
<div class="flex flex-col mt-6">
<AcvCheckbox v-model="isAgreed">
I am agreed to terms and conditions
</AcvCheckbox>
<p class="mt-2">
value: {{ isAgreed }}
</p>
</div>
<div class="acv-grid-row acv-grid--cols-4 mt-6">
<AcvCheckbox
v-model="checked[0]"
label="Checked"
/>
<AcvCheckbox
v-model="checked[1]"
label="Unchecked"
/>
<AcvCheckbox
v-model="checked[2]"
label="Disabled and checked"
disabled
/>
<AcvCheckbox
v-model="checked[3]"
label="Disabled"
disabled
/>
</div>
</template>Disabled
Indeterminate
Accessibility
Provided AcvCheckbox component must adapt to the list of WAI-ARIA accessibility patterns.
It should:
- able to navigate to the checkbox using the keyboard;
- clicking or tapping should change the state of the checkbox;
- it should be focusable;
- in multiple checkboxes, it should be clearly distinguishable from other checkboxes;