Radio

Demos

Sizes

Available size variant for the ui prop: small.

<template>
<article>
  <section>
    <veui-radio :checked.sync="normal">
      Normal size
    </veui-radio>
    <veui-radio
      :checked.sync="small"
      ui="small"
    >
      Small size
    </veui-radio>
  </section>
  <section>
    <veui-button
      ui="small"
      @click="reset"
    >
      Reset
    </veui-button>
  </section>
</article>
</template>

<script>
import { Radio, Button } from 'veui'

export default {
  components: {
    'veui-radio': Radio,
    'veui-button': Button
  },
  data () {
    return {
      normal: false,
      small: false
    }
  },
  methods: {
    reset () {
      this.normal = false
      this.small = false
    }
  }
}
</script>

Setting value

Use the value prop to specify the value bound to model prop (used for v-model).

Selected: -

<template>
<article>
  <veui-radio
    v-for="({ value, label }) in flavors"
    :key="value"
    v-model="flavor"
    :value="value"
  >
    {{ label }}
  </veui-radio>
  <p>Selected: {{ flavorLabelMap[flavor] || '-' }}</p>
</article>
</template>

<script>
import { Radio } from 'veui'

export default {
  components: {
    'veui-radio': Radio
  },
  data () {
    return {
      flavor: null,
      flavors: [
        { value: 'LATTE', label: 'Latte' },
        { value: 'MOCHA', label: 'Mocha' },
        { value: 'AMERICANO', label: 'Americano' }
      ]
    }
  },
  computed: {
    flavorLabelMap () {
      return this.flavors.reduce((map, { value, label }) => {
        map[value] = label
        return map
      }, {})
    }
  }
}
</script>

API

Props

NameTypeDefaultDescription
uistring-

Style variants.

ValueDescription
smallSmall radio.
model*-

v-model

The value of the checked item, being value when checked and value of the Radio bound to the same v-model datasource when unchecked.

checkedbooleanfalse

.sync

Whether the checkbox is checked.

value*trueThe value of the radio.
disabledbooleanfalseWhether the radio is disabled.
readonlybooleanfalseWhether the radio is read-only.

Slots

NameDescription
defaultThe label text of the radio. The radio is selected when the label is clicked. Displays nothing by default.

Events

NameDescription
changeTriggered when user checks the radio. The callback parameter list is (checked: boolean). checked denotes whether the radio 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, Radio 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.