# Checkbox

This page contains all possible variations of the VUE checkbox component.

A checkbox lets users select one or more values as part of a form process.

# Getting and Setting

# v-model

The checkbox takes advantage of the v-model syntax to sync values with a parent.

<GocoCheckbox v-model="isChecked" />

data() {
  return {
    isChecked: false
  }
}

# Props and Events

When working with Vuex, you'll need to trigger a mutation rather than mutating a value directly. The checkbox exposes the checked prop and a changed event to enable this. You can bind the checked value with :checked="isChecked", and use the changed event to trigger a mutation or dispatch an action.

<GocoCheckbox :checked="isChecked" @changed="setChecked" />

computed: {
  isChecked() {
    return this.$store.getters.isChecked;
  }
},
methods: {
  setChecked(value) {
     //  trigger a mutation, or dispatch an action  
  }
}

# Default

<GocoCheckbox 
  id="checkbox-default"
  label="Checkbox Label"
  name="checkbox-default" />

# Custom Label Content

The checkbox makes use of slots. This makes it possible to nest custom label content inside the component. The slot content takes precedence over the label prop.

<GocoCheckbox id="checkbox-custom-label" name="checkbox-custom-label">
  <div>Custom label content</div>
</GocoCheckbox>

# Sizes

# Small

<GocoCheckbox 
  id="checkbox-small"
  label="Checkbox Label"
  size="small"
  name="checkbox-small" />

# Disabled

<GocoCheckbox 
    id="checkbox-disabled"
    label="Checkbox Label"
    name="checkbox-disabled"
    disabled="disabled" />

# Dark

<GocoCheckbox 
    id="checkbox-dark"
    label="Checkbox Label"
    name="checkbox-dark"
    dark />

# Component props