Checkbox

A checkbox is a way of presenting one or more boolean options to a user.

Simple Demo

Use v-model to track your checkboxes value.

<template>
  <ci-checkbox v-model="checkboxVal" />
</template>

<script>
export default {
  data() {
    return {
      checkboxVal: false
    }
  }
}
</script>

Label

Use the label prop or slot to add a label to your checkbox

<template>
  <div>
    <ci-checkbox
      v-model="labelCheckboxOne"
      label="Prop labeled checkbox"
    />
    <ci-checkbox v-model="labelCheckboxTwo" >
      <strong>Slot</strong> labeled checkbox
      <ci-tooltip text="Some tooltip"/>
    </ci-checkbox>
  </div>
</template>

<script>
export default {
  data() {
    return {
      labelCheckboxOne: false,
      labelCheckboxTwo: false,
    }
  }
}
</script>

Events

Use the @change event to run some code on change.

<template>
  <ci-checkbox
      v-model="myCheckboxVal"
      label="Prop labeled checkbox"
      @change="logValue"
    />
</template>

<script>
export default {
  data() {
    return {
      myCheckboxVal: true,
    }
  },
  methods: {
    logValue() {
      console.log(this.myCheckboxVal)
    }
  }
}
</script>

Disabled Checkboxes

Use disabled to disable a checkbox.

<template>
  <ci-checkbox
    v-model="disabledCheckbox"
    label="Disabled checkbox"
    disabled
  />
</template>

<script>
export default {
  data() {
    return {
      disabledCheckbox: true
    }
  }
}
</script>

Custom True/False Values

Use true-value and false-value if you need more than true and false for your checkbox.

<template>
  <ci-checkbox
    v-model="myCheckbox"
    true-value="Yes please"
    false-value="No thanks"
  >
    {{ myCheckbox }}
  </ci-checkbox>
</template>

<script>
export default {
  data() {
    return {
      myCheckbox: 'Yes please'
    }
  }
}
</script>

Fieldset

Checkboxes can be wrapped in a Fieldset to apply a Legend to the entire group, or to disable an entire group of checkboxes. See Fieldset for more information.

<template>
  <ci-fieldset
    legend="My Checkboxes"
    description="These checkbox are disabled"
    disabled
  >
    <ci-checkbox
      v-model="fieldsetCheckboxOne"
      label="Labeled checkbox"
    />
    <ci-checkbox v-model="fieldsetCheckboxTwo" >
      Labeled checkbox
    </ci-checkbox>
  </ci-fieldset>
</template>

<script>
export default {
  data() {
    return {
      fieldsetCheckboxOne: false,
      fieldsetCheckboxTwo: false
    }
  }
}
</script>

Binding to an array

You can bind multiple checkboxes to the same array with v-model and value.

<template>
  <ci-fieldset legend="Pizza Toppings" description="Choose your toppings">
    <ci-checkbox
      v-for="topping in pizzaToppings"
      :key="topping"
      v-model="selectedPizzaToppings"
      :value="topping"
      :label="topping"
    />
  </ci-fieldset>
</template>

<script>
export default {
  data() {
    return {
      pizzaToppings: [
        'Pepperonni',
        'Sausage',
        'Mushroom',
        'Olive',
        'Peppers',
        'Onions'
      ],
      selectedPizzaToppings: ['Pepperonni']
    }
  }
}
</script>

Indeterminate state

Use indeterminate prop to set state as indeterminate. Indeterminate checkboxes are still considered checked, but have a different visual appearance purely for UX.

<template>
  <div>
    <ci-fieldset
      legend="Pizza Toppings"
      description="Choose your toppings"
    >
      <ci-checkbox
        :modelValue="selectedPizzaToppings.length > 0"
        :indeterminate="!this.allChecked"
        label="All toppings"
        class="check-all"
        @change="checkAll"
      />

      <ci-checkbox
        v-for="topping in pizzaToppings"
        :key="topping"
        v-model="selectedPizzaToppings"
        :value="topping"
        :label="topping"
      />
    </ci-fieldset>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pizzaToppings: [
        'Pepperonni',
        'Sausage',
        'Mushroom',
        'Olive',
        'Peppers',
        'Onions'
      ],
      selectedPizzaToppings: ['Pepperonni']
    }
  },

  computed: {
    allChecked() {
      return this.pizzaToppings.every(topping => this.selectedPizzaToppings.includes(topping))
    }
  },

  methods: {
    checkAll() {
      this.selectedPizzaToppings = this.allChecked ? [] : this.pizzaToppings
    }
  }
}
</script>

<style>
.check-all {
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid black;
}
</style>