Customizing checkbox/radio labels in HTML format

Question

Using the options attribute when setting up an array of checkbox and/or radio elements, how can one customize the label in HTML format for each radio/checkbox? For example, I want to style the Date/Time with break returns -- see output example below:

[ ] Tuesday, Jan 1
    5:00pm to 7:30pm
[ ] Wednesday, Jan 2
    6:00am to 8:00am
[ ] Friday, Jan 4
    1:00pm to 3:30pm

Here's the vue code:

<FormulateInput 
  type="checkbox"
  label="Select dates that applies"
  :options="options"
  v-model="dates"
  >

Show you current code running. It's hard to understand whats going on — krylov123, Aug 02 '20 at 18:47

score 2 · Answer 1 · answered Aug 06 '20 at 17:48

Vue Formulate, by default, does not use v-html for labels (for security reasons). However, you can choose to implement your own slotComponent for labels that does.

import VueFormulate from '@braid/vue-formulate'
import MyLabel from './MyLabel.vue'


Vue.component('MyLabel', MyLabel)

Vue.use(VueFormulate, {
  slotComponents: {
    label: 'MyLabel'
  }
})

// MyLabel.vue
<template>
<label
  class="context.classes.label"
  for="context.id"
  v-html="context.label"
/>
</template>

<script>
export default {
  props: {
    context: {
      type: Object,
      required: true
    }
  }
}
</script>

Then in your options objects, you would be able to use HTML strings as the keys:

const dates = [
  { label: 'Tuesday, Jan 1<br>5:00pm to 7:30pm': value: '01-01-2020' }
  { label: 'Wednesday, Jan 2<br>6:00am to 8:00am': value: '01-02-2020' }
]

Customizing checkbox/radio labels in HTML format

1 Answers1