Overview

The checkbox component is a Vue component that handles the binding of checkbox values for Vue based interfaces.

ADA:

A dynamically generated Id is created to bind the label & the input element itself.
- The dynamic nature of this will prevent id collisions.

VueJs:

Implementation

The checkbox component can be binded much the same way a normal checkbox can be in Vue. Vue Docs

You can either use v-model as a prop on this component, or a combination of a binded ":value" prop with an @input listener.

If the "input-value" prop isn't defined, then any variable binded to this component will a boolean value. If "input-value" is defined, then this value will be an array of strings including any checked checkbox components also binded to the same variable.

Props

name
- Type: String
- Default: ''
- Text defining the name attribute of the checkbox input element
label
- Type: String
- Required
- Text for the visible label
size
- Type: String
- Default: ''
- Modifier to control the overall size of the checkbox
value
- Type: Array or Boolean
- Default: null,
- Value definining the state of the checkbox.
  - A "true" bool value means the checkbox is checked
  - If the array includes a string matching the "input-value" of this component, then the checkbox will be checked
input-value
- Type: String,
- Default: ''
- Text defining the value attribute of the checkbox input element
  - Also used as an "id" of sorts if an array is binded to this component via v-model or the "value" prop. -classes
- Type: String
- Add '-alignTop' to make the checkbox be at the top of the label instead of being in the middle.