Vue3 RadioButton

Vue RadioButton is an extension to standard radio button element with theming. It supports Vue 3 with PrimeVue 3 and Vue 2 with PrimeVue 2.

Setup

Refer to PrimeVue setup documentation for download and installation steps for your environment such as Vue CLI, Vite or browser.

Import

import RadioButton from 'primevue/radiobutton';

Getting Started

Two-way value binding is defined using the standard v-model directive.

<RadioButton name="city" value="Chicago" v-model="city" />
<RadioButton name="city" value="Los Angeles" v-model="city" />

export default {
    data() {
        return {
            city: null
        }
    }
}

As model is two-way binding enabled, giving a default value to the model is enough to display a radio button as checked by default.

export default {
    data() {
        return {
            city: 'Chicago'
        }
    }
}

Theming

RadioButton supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeVue RadioButton showcase for demos and documentation.