Radio

Augmented form field for choice input.

Config

The options below are to be set in the global configuration at the following location:

{
  components: {
    radio: { ... },
  },
}

class

Classes applied to the input element, except when the prop bare is set to true. See styling components.

  • type: Array<String | Object> | Object | String | (props: Object) => {}
  • default: null

Example

class({ checked }) {
    return ['radio', {
        'radio--checked': checked,
    }]
}

API

NameTypeDefaultDescription
Props
variant string|arraynull

Useful when used in the component config class option, to style it conditionally. See styling components.

bare booleanfalse

Disable class inheritance from the component config. See styling components.

disabled booleannull

Set the HTML disabled attribute

required booleannull

Set the HTML required attribute

modelValue anynull

Bind the Radio state with the parent component.

value *any

The value to be used when the Radio is checked.

Events
update:modelValue

Examples

Controlled

<template>
  <CRadio v-model="value" value="A" />
  <CRadio v-model="value" value="B" />
  <CRadio v-model="value" value="C" />
</template>

<script>
export default {
  data() {
    return {
      value: null, // None by default
    };
  },
};
</script>