Radio buttons

To use the custom radio buttons you need to import the custom made component:
import {Radio} from 'src/components'

Global usage

Vue.component(, Radio)

For local usage

export default {
  components: {
    []: Radio

Custom radio buttons

     <p-radio v-model="enabledRadio" label="1">Radio is off</p-radio>
     <p-radio v-model="enabledRadio" label="2">Radio is on</p-radio>

     <p-radio disabled v-model="disabledRadio" label="1">Disabled radio is off</p-radio>
     <p-radio disabled v-model="disabledRadio" label="2">Disabled radio is on</p-radio>

  export default {
    data () {
        return {
           enabledRadio: '2',
           disabledRadio: '2',

Changing colors

To change default radio color, go to _checkboxes-radios.css and change line 160


@include radio-colors($default-color);
@include checkbox-colors($default-color);

If you want to have multiple checkbox colors, we recommend extending these 2 mixins with extra css classes (e.g .form-check.form-check-success) and add the corresponding classes to Radio.vue component.

Radio Props

Radio Events

Event NameDescriptionParameters
inputtriggers when the binding value changesthe updated value