How to anchor Quasar QInput/QSelect placeholder label at top and within the QInput/QSelect boxes even when no data added or selected in them?

How to anchor placeholder label at top and within the QInput/QSelect boxes even when no data added or selected in them?

I am requesting this to avoid users assuming that data already added in the fields on first look.

What I expect is the positioning of the label as in the Display Name field below with no data added in it.

It should NOT be like in the User Name and Password fields.

Kindly help.

Solution

There is a prop for this 'stack-label'

stack-label : Boolean
Label will be always shown above the field regardless of field content (if any)

code example

<q-input v-model="text" label="Display Name" stack-label />