Checkbox labels appear under the checkbox (even with no styles loaded)

Question

How to fix the default (no styles) checkbox labels that appear under the box (it should be to the right of the box like in the example)

I'm using tailwind and styling the form through the global string option. Everything worked great so far until I tried styling checkboxes. The issue being that the label is showing beneath the box, and even if I remove all styles (as show in the screenshot) this is still and issue. I don't know how to target this label with the global string option, this is the structure I've been working on, trying to style label>box and input>box to get the label beside the checkbox.

Vue.use(VueFormulate, {
    classes: {
        outer: 'py-4',
        wrapper(context) {
            switch (context.classification) {
                case "button":
                    return "";
                default:
                    return "bg-regal-blue-400 py-3  w-full hover:bg-regal-blue-500";
            }
        },
        label(context){
            switch (context.classification) {
                case "box":
                    return "bg-red-500";
                default:
                    return "w-full block text-gray-400 px-4 text-lg";
            }
        },
        element: 'w-full',
        input(context) {
            switch (context.classification) {
                case "button":
                    return "text-lg border-2 rounded-full h-12 bg-red-900 border-red-500 font-bold px-10 hover:bg-red-500 transition-colors duration-500 focus:outline-none";
                case "textarea":
                    return "bg-transparent w-full mt-2 h-48 focus:outline-none text-xl placeholder-gray-700 px-4";
                case "box":
                    return "h-6 w-6";
                default:
                    return "bg-transparent w-full h-10 focus:outline-none text-xl placeholder-gray-700 px-4";
            }
        },
        button: 'bg-red-500',
        help: '',
        errors: 'px-4',
        error: 'text-red-500'
    }
})

Even in some of the provided codebox examples, like "Tailwind via Config", if you add a checkbox to the existing form the labels appear under the checkboxes https://codesandbox.io/s/tailwind-vue-formulate-2-password-reset-all-global-kydyp

Answer 1

I think all that is missing is a display: flex on the wrapper when it's a box. Here's the code you provided for your configuration modified with a flex:

Vue.use(VueFormulate, {
  classes: {
    outer: "py-4",
    wrapper(context) {
      switch (context.classification) {
        case "button":
          return "";
        case "box":
          return "w-full flex justify-start";
        default:
          return "bg-regal-blue-400 py-3  w-full hover:bg-regal-blue-500";
      }
    },
    label(context) {
      switch (context.classification) {
        case "box":
          return "bg-red-500 flex-grow";
        default:
          return "w-full block text-gray-400 px-4 text-lg";
      }
    },
    element ({ classification }) {
      switch (classification) {
        case 'box':
          return 'px-1';
        default:
          return 'w-full';
      }
    },
    input(context) {
      switch (context.classification) {
        case "button":
          return "text-lg border-2 rounded-full h-12 bg-red-900 border-red-500 font-bold px-10 hover:bg-red-500 transition-colors duration-500 focus:outline-none";
        case "textarea":
          return "bg-transparent w-full mt-2 h-48 focus:outline-none text-xl placeholder-gray-700 px-4";
        case "box":
          return "h-6 w-6";
        default:
          return "bg-transparent w-full h-10 focus:outline-none text-xl placeholder-gray-700 px-4";
      }
    },
    button: "bg-red-500",
    help: "",
    errors: "px-4",
    error: "text-red-500"
  }
});

And here's a link to an example: https://codesandbox.io/s/tailwind-vue-formulate-checkbox-after-pwxh2?file=/src/main.js