Checkbox

Basic checkboxes. Mainly used for multiple selection from a group of options, or used individually to toggle a state.

Basic Usage

Multi-select框    false

<template>
  <div>
    <b-checkbox v-model="value">Multi-select框</b-checkbox>
    &nbsp;&nbsp;
    <span style="color: #ff4511">{{ value }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(false)
</script>

Combo Usage

TwitterFacebookGithubSnapchat

[ "facebook", "github" ]

BananaAppleWatermelon

[ "Apple" ]

<template>
  <div>
    <b-checkbox-group v-model="social">
      <b-checkbox label="twitter">
        <span>Twitter</span>
      </b-checkbox>
      <b-checkbox label="facebook">
        <span>Facebook</span>
      </b-checkbox>
      <b-checkbox label="github">
        <span>Github</span>
      </b-checkbox>
      <b-checkbox label="snapchat">
        <span>Snapchat</span>
      </b-checkbox>
    </b-checkbox-group>
    <p style="color: #ff4511; margin: 5px 0">{{ social }}</p>
    <b-checkbox-group v-model="fruit">
      <b-checkbox label="Banana"></b-checkbox>
      <b-checkbox label="Apple"></b-checkbox>
      <b-checkbox label="Watermelon"></b-checkbox>
    </b-checkbox-group>
    <p style="color: #ff4511; margin: 5px 0">{{ fruit }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const social = ref(['facebook', 'github'])
const fruit = ref(['Apple'])
</script>

Disabled

Checkbox

BananaAppleWatermelon

<template>
  <div>
    <b-checkbox v-model="disabledSingle" disabled>Checkbox</b-checkbox>
    <b-checkbox-group v-model="disabledGroup">
      <b-checkbox label="Banana" disabled></b-checkbox>
      <b-checkbox label="Apple" disabled></b-checkbox>
      <b-checkbox label="Watermelon"></b-checkbox>
    </b-checkbox-group>
  </div>
</template>

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

const disabledSingle = ref(true)
const disabledGroup = ref(['Apple'])
</script>

Select All

全选 [ "Banana", "Watermelon" ] - false

BananaAppleWatermelon草莓

<template>
  <div style="border-bottom: 1px solid #e9e9e9; padding-bottom: 6px; margin-bottom: 6px">
    <b-checkbox v-model="checkAll" :indeterminate="indeterminate" @change="handleCheckAll">
      全选
    </b-checkbox>
    <span style="color: #ff4511; margin: 5px 0">{{ checkAllGroup }} - {{ checkAll }}</span>
  </div>
  <b-checkbox-group v-model="checkAllGroup" @change="checkAllGroupChange">
    <b-checkbox label="Banana"></b-checkbox>
    <b-checkbox label="Apple"></b-checkbox>
    <b-checkbox label="Watermelon"></b-checkbox>
    <b-checkbox label="草莓"></b-checkbox>
  </b-checkbox-group>
</template>

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

const all = ['Banana', 'Watermelon', 'Apple', '草莓']

const indeterminate = ref(false)
const checkAll = ref(false)
const checkAllGroup = ref(['Banana', 'Watermelon'])

function handleCheckAll(val) {
  checkAllGroup.value = val ? all : []
  indeterminate.value = false
}

function checkAllGroupChange(value) {
  if (value.length === all.length) {
    indeterminate.value = false
    checkAll.value = true
  } else if (value.length > 0) {
    indeterminate.value = true
    checkAll.value = false
  } else {
    indeterminate.value = false
    checkAll.value = false
  }
}
</script>

Limit Count

Control the limit on the number of checked items

BananaAppleWatermelon草莓

[ "Banana", "Watermelon" ]

<template>
  <div>
    <b-checkbox-group v-model="checkAllGroup" :min="1" :max="2">
      <b-checkbox label="Banana"></b-checkbox>
      <b-checkbox label="Apple"></b-checkbox>
      <b-checkbox label="Watermelon"></b-checkbox>
      <b-checkbox label="草莓"></b-checkbox>
    </b-checkbox-group>
    <span style="color: #ff4511; margin: 5px 0">{{ checkAllGroup }}</span>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const checkAllGroup = ref(['Banana', 'Watermelon'])
</script>

Checkbox props

Parameter	Description	Type	Options	Default
modelValue	Only effective when used alone. Use v-model for two-way binding	Boolean	—	false
label	Effective when used in a group. Specifies the value of the current option; the group automatically determines whether it is selected	String/Number/Boolean	—	—
disabled	Disables the current item	Boolean	—	false
true-label	Selected value	String、Number	—	—
false-label	Unselected value	String、Number	—	—
indeterminate	Set indeterminate state, only responsible for style control	Boolean	—	false

Checkbox events

Event Name	Description	Return Value
change	Only effective when used alone. Triggers when option state changes; will not trigger when external data is modified	true/false

CheckboxGroup props

Parameter	Description	Type	Options	Default
value	Specifies the set of selected items; use v-model for two-way binding	String/ Number	—	''
disabled	Disables all options	Boolean	—	false
min	Minimum count	Number	—	—
max	Maximum count	Number	—	—

CheckboxGroup events

Event Name	Description	Return Value
change	Triggers when option state changes, returns an array of selected items. Will not trigger when external data is modified	[...]