Input

The QInput component is used to capture text input from the user. It uses v-model, similar to a regular input. It has support for errors and validation, and comes in a variety of styles, colors, and types.

Installation


// quasar.conf.js

return {
  framework: {
    components: [
      'QInput'
    ]
  }
}

Design

WARNING

For your QInput you can use only one of the main designs (filled, outlined, standout, borderless). You cannot use multiple as they are self-exclusive.

Design Overview



Coloring

Coloring



Standard

Standard



Filled

Filled



Outlined

Outlined



Standout

Standout



One of the most appropriate use cases for Standout design is in a QToolbar:

Standout in QToolbar



Borderless

The borderless design allows you to seamlessly integrate your QInput into other components without QInput drawing a border around itself or changing its background color:

Borderless



Rounded design

The rounded prop only works along with Filled, Outlined and Standout designs, as showcased in the example below:

Rounded



Square borders

The square prop only makes sense along with Filled, Outlined and Standout designs, as showcased in the example below:

Square borders



Dark background

Dark



Basic features

Clearable

As a helper, you can use clearable prop so user can reset model to null through an appended icon. The second QInput in the example below is the equivalent of using clearable.

Clearable



Input types

The following QInputs make use of the type prop in order to render native equivalent <input type="..."> inside of them.

WARNING

Support and behavior is the subject entirely of the browser rendering the page and not Quasar’s core code.

Input types



TIP

Some input types (like date or time) always render some controls, so you if you’re using a label then you might want to set it along with stack-label, otherwise the label will overlap native browser controls.

Input of number type

You’ll be using v-model.number (notice the number modifier) along with type="number" prop:

Input of number type



Input of file type

WARNING

Do NOT use a v-model when QInput is of type="file". Browser security policy does not allow a value to be set to such an input. As a result, you can only read it (attach an @input event), but not write it.

Input of file type



Textarea

Textarea



When you need QInput to grow along with its content, then use the autogrow prop like in the example below:

Autogrow



Prefix and suffix

Prefix and suffix



Debouncing model

The role of debouncing is for times when you watch the model and do expensive operations on it. So you want to first let user type out before triggering the model update, rather than updating the model on each keystroke.

Debounce model



Loading state

Loading state



Mask

You can force/help the user to input a specific format with help from mask prop.

Below are mask tokens:

TokenDescription
#Numeric
SLetter, a to z, case insensitive
NAlphanumeric, case insensitive for letters
ALetter, transformed to uppercase
aLetter, transformed to lowercase
XAlphanumeric, transformed to uppercase for letters
xAlphanumeric, transformed to lowercase for letters
Basic



Filling the mask



The unmask-value is useful if for example you want to force the user type a certain format, but you want the model to contain the raw value:

Unmasked model



Validation

Internal validation

You can validate QInput components with :rules prop. Specify array of embedded rules or your own validators. Your custom validator will be a function which returns true if validator succeeds or String with error message if it doesn’t succeed.

This is so you can write convenient rules of shape like:

value => condition || errorMessage

For example:

value => value.includes('Hello') || 'Field must contain word Hello'

You can reset the validation by calling resetValidation() method on the QInput.

Basic



Maximum length



If you set lazy-rules, validation starts after first blur.

Lazy rules



Form validation



Async rules

Rules can be async too, by using async/await or by directly returning a Promise.

TIP

Consider coupling async rules with debounce prop to avoid calling the async rules immediately on each keystroke, which might be detrimental to performance.

Async rules



External validation

You can also use external validation and only pass error and error-message (enable bottom-slots to display this error message).

TIP

Depending on your needs, you might connect Vuelidate (our recommended approach) or some other validation library to QInput.

External



You can also customize the slot for error message:

Slot for error message



QInput API