Vueformulate Custom labels for radio input?

151 views Asked by At

I'm using vueformulate and I have a radio select input that I want to customize the labels for. So instead of say a radio button for 1) yes and 2) no I want it so that if I click yes, there is an additional text field that shows up under "yes".

Is there a way to customize the label? So far in the documentation I only see label/value options as an object.

Or how would I add HTML to the label string? If I wanted to add line breaks, spacing, etc?

Code:

<FormulateInput
            v-model="formData.candySelection"
            :options="candyOptions"
            label="I’m interested in..*"
            type="radio"
            validation="required"
/>
candyOptions: [
        {
          value: 'Chocolate',
          label:
            'Chocolate',
        },
        {
          value: 'Cotton Candy',
          label: `Cotton Candy:
            * Must be sugar-free
            * 100% organic `,
        },
      ],
  1. You'll see in the value/label pair above, I cannot put HTML inside so the radio option will print it all in one line. I want to put bullet points and line spacing.

  2. I want the label say if I click Cotton Candy, I want a text field under option 2 to input "Other candy" so the user can put in their own choice.

0

There are 0 answers