VEUI

VEUI on GitHub
中文

Checkbox

Demos

Size variants

Available size variant for the ui prop: s / m.

Use the indeterminate prop to put the checkbox in indeterminate state.

Edit this demo on GitHubEdit
<template>
<article>
  <section>
    <veui-checkbox
      v-model="checked"
      :ui="size"
      :indeterminate.sync="indeterminate"
    >
      Checked: {{ checked }}
    </veui-checkbox>
  </section>
  <section>
    <veui-checkbox
      v-model="small"
      ui="s"
    >
      Small
    </veui-checkbox>
    <veui-checkbox
      v-model="indeterminate"
      ui="s"
    >
      Indeterminate
    </veui-checkbox>
  </section>
</article>
</template>

<script>
import { Checkbox } from 'veui'

export default {
  components: {
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      checked: false,
      indeterminate: false,
      small: false
    }
  },
  computed: {
    size () {
      return this.small ? 's' : ''
    }
  }
}
</script>

<style lang="less" scoped>
.veui-checkbox {
  & + & {
    margin-left: 20px;
  }
}
</style>

True/false values

Use the true-value and false-value props to customize the model value (used in its v-model) of the checkbox in checked/unchecked state.

State: Not confirmed

Edit this demo on GitHubEdit
<template>
<article>
  <veui-checkbox
    v-model="status"
    true-value="CONFIRMED"
    false-value="UNCONFIRMED"
  >
    I've read the agreement
  </veui-checkbox>
  <p>State: {{ statusMap[status] }}</p>
</article>
</template>

<script>
import { Checkbox } from 'veui'

const STATUS_MAP = {
  CONFIRMED: 'Confirmed',
  UNCONFIRMED: 'Not confirmed'
}

export default {
  components: {
    'veui-checkbox': Checkbox
  },
  data () {
    return {
      status: 'UNCONFIRMED',
      statusMap: STATUS_MAP
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
uistring=-

Style variants.

ValueDescription
sSmall.
mMedium.
checkedbooleanfalse

.sync

Whether the checkbox is checked.

value*-Denotes the value of current checkbox when v-model is bound to an array.
true-value*=trueThe value for checked state.
false-value*=falseThe value for unchecked state.
indeterminateboolean=falseWhether the checkbox is in an indeterminate state.
disabledboolean=falseWhether the checkbox is disabled.
readonlyboolean=falseWhether the checkbox is read-only.

Slots

NameDescription
defaultThe label text of the checkbox. The checkbox is toggled when the label is clicked. Displays nothing by default.

Events

NameDescription
changeTriggered when user toggles the state of the checkbox. The callback parameter list is (checked: boolean). checked denotes whether the checkbox is checked.
input

v-model

Triggered when the check state is changed. The callback parameter list is (val: *), with val being the current value of v-model. Unlike the change event, input is triggered even without user interaction.

Additionally, Checkbox exposes the following native events:

auxclick, click, contextmenu, dblclick, mousedown, mouseenter, mouseleave, mousemove, mouseover, mouseout, mouseup, select, wheel, keydown, keypress, keyup, focus, blur, focusin, focusout.

The callback parameter is the corresponding native event object for all events above.

Icons

NameDescription
checkedChecked state.
indeterminateIndeterminate state.
Edit this page on GitHubEdit
© Baidu, Inc. 2023