Checkbox

Demos

Size variants

Available size variant for the ui prop: small.

Checked: false

Small Indeterminate

<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="small"
    >
      Small
    </veui-checkbox>
    <veui-checkbox
      v-model="indeterminate"
      ui="small"
    >
      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 ? 'small' : ''
    }
  }
}
</script>

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

<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
`small`	Small checkbox.

model

*

v-model

The value of the checkbox, being true-value when checked and false-value when unchecked. If v-model is bound to an array, the value prop will be used instead.

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 the `model` prop. 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.