[v1-beta] How to display q-input labels above the field?

[ddenev]

Hi,

I am prototyping an app and in our company guidelines the form labels should be placed above the form fields and always visible. Currently QInput allows the label to only be within the field.

How should I instruct QInput to display its labels above the field? Is this possible?

Thank you in advance!

[s.molinari]

@ddenev - The stacked-label prop always puts the label above the field.

https://codepen.io/smolinari/pen/PgwYGz?editors=1010

If you mean actually completely above the field, like above the darker area in the Standout style, that isn’t part of the Material Design specs, which Quasar follows. If you want that, you’ll have to design your own input component by making an external label structure and leaving the label prop empty in QInput.

Scott

[ddenev]

Thank you very much, Scott!

[rubs]

For those who are still interested, there is a simple CSS-only solution here:

https://codepen.io/rubem-pechansky/pen/NWKNwye

[s.molinari]

Or this one too.

https://codepen.io/smolinari/pen/YzKqepz

Scott