Radio

Examples

Size variants

Available values for the ui prop: s / m.

Normal size Small size

<template>
<article>
  <section>
    <veui-radio
      v-model="size"
      class="radio"
      value="m"
      :ui="size"
      name="size"
    >
      Normal size
    </veui-radio>
    <veui-radio
      v-model="size"
      class="radio"
      value="s"
      :ui="size"
      name="size"
    >
      Small size
    </veui-radio>
  </section>
</article>
</template>

<script>
import { Radio } from 'veui'

export default {
  components: {
    'veui-radio': Radio
  },
  data () {
    return {
      size: 'm'
    }
  }
}
</script>

<style lang="less" scoped>
.radio {
  margin-right: 20px;
}

section {
  margin-bottom: 20px;
}
</style>

Model values

You can modify the value of v-model when selected by setting the value prop.

Latte Mocha Americano

Selected: -

Edit this demo on GitHubEdit

<template>
<article>
  <veui-radio
    v-for="({ value, label }) in flavors"
    :key="value"
    v-model="flavor"
    class="radio"
    :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>

<style lang="less" scoped>
.radio {
  margin-right: 20px;
}
</style>

API

Props

Name Type Default Description

ui

string

Predefined styles.

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

checked

boolean

false

.sync

Whether the component is in the selected state.

value * true The value corresponding to the selected state.

disabled boolean false Whether the component is disabled.

readonly boolean false Whether the component is read-only.

Slots

Name	Description
`default`	The description text of the radio button. It will be selected when clicked. No default content.

Events

Name	Description
`change`	Triggered when the user switches the selected state. The callback parameter is `(checked: boolean)`. `checked` indicates whether it is currently selected.
`input`	`v-model` Triggered after the selection state has changed. The callback parameter is `(val: *)`. `val` is the current value of `v-model`. Unlike the `change` event, the `input` event will also be triggered when the data operation causes the state to change.

In addition, Radio supports 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 parameters are all corresponding native event objects.

Edit this page on GitHubEdit