Field

The QField component is used to provide common functionality and aspect to form components. It uses :value (or v-model if you want to use clearable property) to have knowledge of the model of the component inside. It has support for labels, hints, errors, validation, and comes in a variety of styles and colors.

QField allows you to display any form control (or almost anything as a matter of fact) inside it. Just place your desired content inside the control slot.

WARNING

Do NOT wrap QInput or QSelect with QField. These two components already inherit QField.

Installation


// quasar.conf.js

return {
  framework: {
    // not needed if using auto-import feature:
    components: [
      'QField'
    ]
  }
}

Design

TIP

The examples below use dumb content (text) just to show you the design that QField can use. For checking out examples that wrap real components, see the “Basic Features” section.

WARNING

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

WARNING

QField does not (and should not) manage your control slot, so if you use label prop, it might be a good idea to also specify stack-label, otherwise it might overlap your control when QField is not focused.

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 QField into other components without QField 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.

WARNING

If using clearable you must use v-model or listen on @input and update the value.

Clearable



Control types

Anything you place inside the control slot will be used as content of the field. We provide a few examples of controls below.

Control types



TIP

Most of the form controls always render something visible, so you if you’re using a label then you might want to set it along with stack-label, otherwise the label will overlap the enclosed control.

Prefix and suffix

Prefix and suffix



Loading state

Loading state



Validation

Internal validation

You can validate QField 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 < 10 || 'Value should be lower'

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

Basic



Maximum value



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

Lazy rules



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 QField.

External



You can also customize the slot for error message:

Slot for error message



QField API