ACV Checkbox

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.

Figma mockups

https://www.figma.com/design/6nFlVmwDwvGloglQHxyElh/Tokens-test?node-id=56-4414

Basic usage

I am agreed to terms and conditions

value: false

CheckedUncheckedDisabled and checkedDisabled

Source code

<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

Default disabled

Checked and disabled

Indeterminate and disabled

With hover hint. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque commodi deleniti dignissimos dolores earum eius expedita fugit ipsum natus, neque nesciunt odio officiis porro, quaerat quia quo repudiandae soluta voluptatibus.

With description

Indeterminate

null

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;

Aldo

• Checkbox
• Checkbox group
• Checkbox role
• Apple design checkboxes

Props

Prop name	Description	Type	Values	Default
cycleIndeterminate	Enable cycling indeterminate state	boolean	-
indeterminateValue	Custom value for indeterminate state of the Checkbox	CheckboxModelValue	-	null
uncheckedValue	Value of the Checkbox if it's not checked	CheckboxModelValue	-	false
checkedValue	Value of the Checkbox if it's checked	CheckboxModelValue	-	true
modelValue	Bind v-model value	CheckboxModelValue	-
id	Title of the Checkbox	string	-
label	Label text inside default slot	string	-
disabled	Whether the Checkbox is disabled	boolean	-	false
name	Native name attribute	string	-
showHint	Show browser's default title hint	boolean	-	false
multilineLabel	Enables multiline label	boolean	-	false
multilineLabelLimit	Limit the number of lines of the label	number	-
size	Size of the Checkbox	ComponentSize	'small', 'medium', 'large'	'medium'
color	Color of the Checkbox	ColorProp	'primary', 'secondary', 'success', 'info', 'warning', 'error'	'primary'
invalid		boolean	-
required		boolean	-
iconClass	Classes for the icon element	string	-

Events

Event name	Properties	Description
update:modelValue	eventName string - The name of the event value any - The updated value	Triggered when binding value changes
update:indeterminate	eventName string - The name of the event value boolean - Indeterminate state value	Triggered when indeterminate state changes

Slots

Name	Description	Bindings
icon	Slot for checkbox icon
default	Default slot for rendering checkbox label