Checkbox

Demos

Size variants

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

Checked: false

Small Indeterminate

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

<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.

I've read the agreement

State: Not confirmed

Edit this page 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

Name Type Default Description

ui

string=

Style variants.

Value	Description
`s`	Small.
`m`	Medium.

checked

boolean

false

.sync

Whether the checkbox is checked.

value * - Denotes the value of current checkbox when v-model is bound to an array.

true-value *= true The value for checked state.

false-value *= false The value for unchecked state.

indeterminate boolean= false Whether the checkbox is in an indeterminate state.

disabled boolean= false Whether the checkbox is disabled.

readonly boolean= false Whether the checkbox is read-only.

Slots

Name	Description
`default`	The label text of the checkbox. The checkbox is toggled when the label is clicked. Displays nothing by default.

Events

Name	Description
`change`	Triggered 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

Name	Description
`checked`	Checked state.
`indeterminate`	Indeterminate state.

Edit this page on GitHubEdit