Switch

Demos

Size variants

Available size variants for the ui prop: large/small.

<template>
<article>
  <section>
    <veui-switch v-model="readonly">
      Read-only
    </veui-switch>
    <veui-switch v-model="disabled">
      Disabled
    </veui-switch>
  </section>
  <section>
    <veui-switch
      v-model="on"
      :readonly="readonly"
      :disabled="disabled"
      ui="large"
    >
      Large size
    </veui-switch>
    <veui-switch
      v-model="on"
      :readonly="readonly"
      :disabled="disabled"
    >
      Normal size
    </veui-switch>
    <veui-switch
      v-model="on"
      :readonly="readonly"
      :disabled="disabled"
      ui="small"
    >
      Small size
    </veui-switch>
  </section>
</article>
</template>

<script>
import { Switch } from 'veui'

export default {
  components: {
    'veui-switch': Switch
  },
  data () {
    return {
      on: false,
      readonly: false,
      disabled: false
    }
  }
}
</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.

Status: On

<template>
<article>
  <veui-switch
    v-model="status"
    true-value="ON"
    false-value="OFF"
  >
    Bluetooth
  </veui-switch>
  <p>Status: {{ statusMap[status] }}</p>
</article>
</template>

<script>
import { Switch } from 'veui'

const STATUS_MAP = {
  ON: 'On',
  OFF: 'Off'
}

export default {
  components: {
    'veui-switch': Switch
  },
  data () {
    return {
      status: 'ON',
      statusMap: STATUS_MAP
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
uistring-

Style variants.

ValueDescription
smallSmall switch.
largeLarge switch.
model*-

v-model

The value of the switch, being true-value when checked and false-value when unchecked.

checkedbooleanfalse

.sync

Whether the checkbox is on.

true-value*trueThe value for checked state.
false-value*falseThe value for unchecked state.
disabledbooleanfalseWhether the switch is disabled.
readonlybooleanfalseWhether the switch is read-only.

Slots

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

Events

NameDescription
changeTriggered when user toggles the state of the switch. The callback parameter list is (checked: boolean). checked denotes whether the switch is on.
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, Switch 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.