BaseCheckbox

BaseCheckbox provides an interface for an un-styled checkbox element. Use v-model to bind the checkbox to your data.

Checkboxes should always be paired with an associated label. BaseCheckbox leaves the details for that relationship to the developer.

Single checkbox

At its most basic, use v-model to bind a single checkbox to a boolean value.

Checked: false

<script setup>
  import { ref } from 'vue';
  import { BaseCheckbox } from '@ais-public/ais-components';

  let flag = ref(false);
</script>

<template>
  <div class="grid gap-4 mx-4">
    <label class="text-lg font-semibold font-sans
                  flex gap-2.5 items-center">
      <BaseCheckbox v-model="flag" id="test-check" name="test" />
      <span>Checked: {{flag}}</span>
    </label>
  </div>
</template>

Multiple checkboxes

Typically, checkboxes are presented in groups of related values. In this case, we iterate over an array of options with v-for making sure to bind the value prop on each checkbox. Additionally, each checkbox is passed an array through v-model to capture all the selections.

OneTwoThreeFour

Selection: []

<script setup>
  import { ref } from 'vue';
  import { BaseCheckbox } from '@ais-public/ais-components';

  let options = ref(['One', 'Two', 'Three', 'Four']);
  let selection = ref([]);
</script>

<template>
  <div class="grid gap-4">
    <div class="flex gap-8 mx-4">
      <label v-for="option in options"
          class="text-lg font-semibold font-sans
                 flex gap-2.5 items-center">
        <BaseCheckbox v-model="selection"  :value="option" />
        <span>{{option}}</span>
      </label>
    </div>

    <div class="bg-ui-gray-50 border rounded p-4">
      Selection: {{selection}}
    </div>
  </div>
</template>