Label Outside of Input?

[JoshKisb]

Is there an easy way to have the label outside the input. like most common forms do

[rodrigosaling]

Hey @JoshKisb ! Maybe this is a very late response, but this is a code that you can start working with:

<template>
  <div>
    <label class="label" :class="{ 'has-error': hasError }" :for="id">
      {{ label }}
    </label>
    <q-input
      outlined
      dense
      :for="id"
      :id="id"
      :rules="rules"
      lazy-rules
      v-bind="$attrs"
      v-on="$listeners"
      @input="onInput"
      @blur="onBlur"
    />
  </div>
</template>

<script>
const HInput = {
  name: 'HInput',

  props: ['label', 'id', 'rules'],

  data() {
    return {
      hasError: false,
    };
  },

  methods: {
    onInput(value) {
      this.checkInputAgainstRules(value, this.rules);
    },

    onBlur(event) {
      this.checkInputAgainstRules(event.target.value, this.rules);
    },

    checkInputAgainstRules(value, rules) {
      this.hasError = rules.some((rule) => rule(value) !== true);
    },
  },
};

export default HInput;
</script>

<style scoped lang="scss">
.label {
  display: block;
  margin-bottom: 3px;

  &.has-error {
    color: $negative;
  }
}
</style>

Then you use it like the default q-input:

    <h-input
      v-model.trim="username"
      label="Username"
      id="username"
      :rules="[
        (val) => (val && val.length > 0) || 'Required field',
        (val) => val.length <= 10 || 'Maximum of 10 characters',
      ]"
    />