Form Checkbox

The <d-form-checkbox> component is a wrapper over Bootstrap's custom checkbox component.

Alias

The <d-form-checkbox> component is also available as <d-checkbox>.

Basic Demo

<template>
    <div>
        <label>Select your favorite fruits</label>
        <d-checkbox v-model="selected" name="fav_fruits" value="orange">Orange</d-checkbox>
        <d-checkbox v-model="selected" name="fav_fruits" value="lemon">Lemon</d-checkbox>
        <d-checkbox v-model="selected" name="fav_fruits" value="kiwi">Kiwi</d-checkbox>
        <p>Checked Status: {{ selected }}</p>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selected: ['orange']
        }
    }
}
</script>

<!-- checkbox-1.vue -->

Toggles

Checkboxes can be turned into toggles by using the toggle prop.



<template>
    <div class="mb-3">
        <d-checkbox inline v-model="enabled" toggle>Enable Rockets <span v-if="enabled">- 🚀🚀 Rockets enabled! 🚀🚀</span> </d-checkbox>
    </div>
</template>

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

<!-- checkbox-2.vue -->

Inline Display

Checkboxes can also be displayed inline using the inline prop.

<div>
    <label class="d-block">Select your favorite sports</label>
    <d-checkbox inline checked="basketball" name="fav_sports" value="basketball">Basketball</d-checkbox>
    <d-checkbox inline name="fav_sports" value="football">Football</d-checkbox>
    <d-checkbox inline name="fav_sports" value="Tennis">Tennis</d-checkbox>
</div>

<!-- checkbox-3.vue -->

Values

By default, the <d-form-checkbox> component's value will be true or false depending on its checked state. However, this can be easily adjusted using the value and unchecked-value props.

Indeterminate State

<template>
  <div>
    <d-form-checkbox v-model="checked" :indeterminate.sync="indeterminate">
      I'm <span v-if="indeterminate">indeterminate 😕</span><span v-else-if="checked">checked 😊</span><span v-else>not checked! 😟</span>
    </d-form-checkbox>

    <div class="my-3">
      Checked: <strong>{{ checked }}</strong><br>
      Indeterminate: <strong>{{ indeterminate }}</strong>
    </div>
    <d-btn @click="toggleIndeterminateState">Toggle Indeterminate</d-btn>
  </div>
</template>

<script>
export default {
  data () {
    return {
      checked: true,
      indeterminate: true
    }
  },
  methods: {
    toggleIndeterminateState () {
      this.indeterminate = !this.indeterminate
    }
  }
}
</script>

<!-- checkbox-4.vue -->

Missing Features

The following checkbox features are currently not supported, but available on the roadmap.

Possibility of creating plain checkboxes.
Checkbox groups.
Button style checkboxes.

Props

Prop	Description	Type	Default	Required
:name	The checkbox input name.	`String`		False
:id	The checkbox input ID.	`String`	null	False
:value	The checkbox input value.	`Boolean`	true	False
:unchecked-value	The checkbox input unchecked state value.	`Boolean`	false	False
:disabled	The disabled state.	`Boolean`		False
:required	The required state.	`Boolean`	false	False
:checked	The checked state.	`Boolean \| String \| Array`		False
:indeterminate	The indeterminate state.	`Boolean`	false	False
:state	The validation state.	`Boolean \| String`	null	False
:toggle	Display as toggle.	`Boolean`	false	False
:toggle-small	Display as small toggle.	`Boolean`	false	False
:inline	Whether the checkbox should be displayed inline, or not.	`Boolean`	false	False