Vue-formulate: Customize classes for box inputs

[borisdayma]

Describe the bug
Box inputs don't allow customization of the label next to the checkbox (and keeping it independently from the label above the boxes.

To Reproduce
Steps to reproduce the behavior:

1. Create a FormulateInput component with checkbox type
2. add a label-class element
3. add a decorator-class element as suggested in documentation
4. only label-class is used for both labels

Reproduction
See codepen

A few more interesting details:

• it appears that the top label (above checkboxes) can be targeted through the "group" classification while the labels next to checkboxes would be associated to "box" classification
• in the same div as the input for checkbox, there is actually a label with the correct class except it's empty.
  
• the label displayed is actually a second label that took the "box" classification
• when passing label-class to the component, only the top label class is overwritten
• when passing decorator-class to the component, no class seems to be overwritten

Expected behavior
I would expect decorator class to be used somewhere.

Device information:

• Device: Desktop
• OS: Windows
• Browser Chrome
• Version 2.4.5

[justin-schroeder]

Howdy 👋

This should be better documented, but for box inputs that use options, the rendered product is actually a type of group input with box sub-inputs. To target the decorator classes using an box input with options you need to set the decorator-class on the option itself, or (more simply) with a class function globally. This allows for a bit more flexibility since you can style the nth box input.

Here's an example of your codesandbox with decorator classes:

https://codesandbox.io/s/tailwind-vue-formulate-2-password-reset-styled-forked-t5eue?file=/src/components/Demo-02.vue

Personally, to style checked inputs I use the decorator label with input:checked + label but if youre using tailwind, you'll have better success just registering a global class styling function, you can actually see an example of this here:

https://codesandbox.io/s/tailwind-vue-formulate-3-form-generation-egn58?from-embed=&file=/src/main.js:1150-1158

Good luck 👍

[borisdayma]

Thanks for the examples!