Checkbox

Allow users to select one or more options.

Basic Usage

Option 1

Disabled option

<template>
  <bp-space>
    <bp-checkbox v-model:check="val">Option 1</bp-checkbox>
    <bp-checkbox v-model:check="val" disabled>Disabled option</bp-checkbox>
  </bp-space>
</template>

<script setup lang="ts">
import { ref } from "vue";
const val = ref(true);
</script>

Checkbox Group

Use checkbox-group with vertical or horizontal layout.

Option 1

Option 2

Option 3

Option 4

Option 1

Option 2

Option 3

Option 4

<template>
  <bp-checkbox-group v-model="val" direction="horizontal">
    <bp-checkbox v-for="v in options" :value="v">{{ v }}</bp-checkbox>
  </bp-checkbox-group>

  <bp-checkbox-group v-model="val" direction="vertical" style="margin-top: 40px;">
    <bp-checkbox v-for="v in options" :value="v">{{ v }}</bp-checkbox>
  </bp-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref([]);
const options = ["Option 1", "Option 2", "Option 3", "Option 4"];
</script>

Limit Selection

Limit selections with checkbox-group max.

Option 1

Option 2

Option 3

Option 4

<template>
  <bp-checkbox-group v-model="val" :max="2">
    <bp-checkbox v-for="v in options" :value="v">{{ v }}</bp-checkbox>
  </bp-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from "vue";

const val = ref([]);
const options = ["Option 1", "Option 2", "Option 3", "Option 4"];
</script>

Indeterminate

Use indeterminate for a partial-selected state.

Select all

[]

Option 1

Option 2

Option 3

Option 4

<template>
  <bp-space>
    <bp-checkbox v-model:check="isSelectAll" :indeterminate @change="onSelectAllChange">Select all</bp-checkbox>
  </bp-space>

  {{ val }}
  <bp-checkbox-group v-model="val" style="margin-top: 20px" @change="onChange">
    <bp-checkbox v-for="v in options" :value="v">{{ v }}</bp-checkbox>
  </bp-checkbox-group>
</template>

<script setup lang="ts">
import { ref } from "vue";

const options = ["Option 1", "Option 2", "Option 3", "Option 4"];

/**
 * Handle checkbox selection change.
 * @param {string[]} e - Selected values.
 *
 * If empty, set `isSelectAll` to false.
 * If all selected, set `indeterminate` to false.
 * Otherwise set `indeterminate` to true.
 */
const isSelectAll = ref(false);
const indeterminate = ref(false);
const onChange = (e: string[]) => {
  if (!e.length) return (isSelectAll.value = false);

  isSelectAll.value = true;
  if (e.length === options.length) {
    indeterminate.value = false;
    return
  }

  indeterminate.value = true;
};

const val = ref<string[]>([]);
const onSelectAllChange = (v: boolean) => {
  if (!v) return (val.value = []);
  val.value = [...options];
};
</script>

Checkbox Props

v-model	Bound value	CheckboxValue	-	-
value	Checkbox value	CheckboxValue	true	-
disabled	Whether disabled	Boolean	-	-
indeterminate	Indeterminate state	Boolean	-	-
max	Max selectable count	Number	-	-

CheckboxGroup Props

v-model	Bound value	CheckboxValue[]	-	-
direction	Layout direction	CheckboxDirectionType	horizontal	-
disabled	Whether disabled	Boolean	-	-
max	Max selectable count	Number	-	-

Checkbox Events

change

Triggered on check

{model:CheckboxValue}

-

CheckboxGroup Events

change

Triggered on check

{model:CheckboxValue[]}

-

Checkbox Slots

default

Label content

-

-

CheckboxGroup Slots

default

Checkbox list

-

-