QInput ⌨️

The QInput is a component that is used to get user input in a text field.

Examples

Popular input cases:

Using in template:

<q-input v-model="value" />

Using in component instance:

export default defineComponent({
  setup() {
    const value = ref('');

    return {
      value
    };
  }
});

Props

modelValue

• Type: String
• Default: null

Binding value.

<q-input v-model="value" />

disabled

• Type: String
• Default: null

Whether input is disabled.

<q-input
  v-model="value"
  disabled
/>

showSymbolLimit

• Type: Boolean
• Default: false

Whether to show symbol limit counter. NOTE: make sure to set maxlength attr as well.

<q-input
  v-model="value"
  show-symbol-limit
  maxlength="20"
/>

validateEvent

• type boolean
• default false

If input wrapped in QFormItem, prop validateEvent defines if input change event will be validated immediately.

suffixIcon

• Type: String
• Default: null

'q-icon-*' - class string, see full list here

<q-input
  v-model="value"
  suffix-icon="q-icon-account"
/>

clearable

• Type: Boolean
• Default: false

Whether QInput is clearable.

<q-input
  v-model="value"
  clearable
/>

passwordSwitch

• Type: Boolean
• Default: false

Whether to show show/hide password switcher.

<q-input
  v-model="value"
  password-switch
/>

rootClass

• Type: String
• Default: null

As native attrs bind to native input (so if you set the class attr to QInput it will be set for native input tag), via rootСlass you can set the class for q-input root (wrapper)

Attributes

QInput support native input attrubutes:

• placeholder
• maxlength
• type
• autocomplete
• readonly

.. and others

p.s input has a lot of attributes, we can't claim QInput well supported all of them, but mostly true. Feel free to fix and contribute bugs here

Events

update:modelValue

Triggers when the model is being updated.

change

Alias for update:modelValue

input

Triggers when native input event fires.

focus

Triggers when input gets focus.

blur

Triggers when input gets blur.

clear

Triggers when clear button clicks.

Slots

suffix

Set your custom content as a suffix.