Topic: How to add some HTML to mdb-input label?

Gilles Migliori free asked 3 years ago


I wondered if there was a way to add some html in an mdb-input label?

For instance to add a required mark:

<mdb-input v-model="name" label="Your name<sup class=\"text-danger\">*</sup>" icon="user" group type="text" />

Of course this code won't work. Any idea?

Gilles Migliori free answered 3 years ago

Thanks, it works fine.

As all my fields are required I ended with a similar solution with a loop:

mounted() {
    const labels = this.$el.getElementsByTagName('label');
    for (let item of labels) {
        item.innerHTML += `<sup class="text-danger ml-1">*</sup>`

Magdalena Dembna staff answered 3 years ago

It doesn't work, because the prop's value is rendered with interpolation, not the v-html directive. As it's not standard behaviour, you need to use a walkaround:

<mdb-input type="text" label="" v-model="inputValue" ref="customLabelInput"/> 

mounted() {
    const [ label] = this.$refs.customLabelInput.$el.getElementsByTagName('label');
    label.innerHTML = `Your name<sup class="text-danger">*</sup>`

Best regards, Magdalena

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 6.7.1
  • Device: any
  • Browser: any
  • OS: any
  • Provided sample code: No
  • Provided link: No