Apply changes in nested class during disabled state in Vue 3

Question

I have implemented radio buttons using Oruga Library in Vue 3, I want to check for the disabled state of the radio button and apply class accordingly.

The code I am using is given below.

<template>
  <o-radio v-bind="$props" v-model="model">
    <slot />
  </o-radio>
</template>

<script lang="ts">
import { defineComponent } from "@vue/runtime-core";
import Radio from '../mixins/radio-mixins';

export default defineComponent({
  name: "BaseRadio",
  computed: {
    model: {
      get() {
        return this.$props.nativeValue;
      },
      set(value: any) {
        this.$emit("input", value);
      },
    },
  },
  emits: ["input"],
  props: {
    ...Radio.props,
  },
});
</script>

<style>
  .b-radio.radio .check:before {
    background  : #A2A9AD;
  }
  .b-radio.radio .check:checked {
    border-color: #A2A9AD;
  }
</style>

I want to apply the two changes present in style tags during radio is disabled. How can i achieve that ?.

I want to check if the radio button is disabled and apply the styles when it is disabled.

Answer 1

Use the class prop .o-radio--disabled :

.b-radio.radio .o-radio--disabled {
  ...
}