Label Outside of Input?



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



  • 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',
          ]"
        />
    

Log in to reply