Search (Textfield)     

The Search component offers the user an input field with additional features for searching purposes. For autocomplete functionality, also refer to QAutocomplete documentation.

Works well with QField for additional functionality such as a helper, error message placeholder and many others.

Installation

Edit /quasar.conf.js:

framework: {
components: ['QSearch']
}

Basic Usage

<q-search v-model="search" />

Vue Properties

Supports v-model which you should bind to a String or Number (depending on type property used) in your scope.

Vue PropertyTypeDescription
iconStringIcon to use.
no-iconBooleanHide the icon
typeStringMust be one of the following: text (default), email, tel, number and url. This is important as it determines the keyboard type popping up on mobile devices.
debounceNumberNumber of ms to debounce input. Default is 300.
readonlyBooleanIf set to true, textfield is readonly and the user cannot change value.
clearableBooleanIf used, the component offers the user an actionable icon to reset the current value to clear-value (which is by default an empty string). The icon appears only when the current value matches clear-value.
clear-valueStringThe value to which to reset the field model to when using clearable. The default value is an empty string.

A more involved example:

<q-search
v-model="searchModel"
:debounce="600"
placeholder="Hotels"
icon="local_hotel"
float-label="What is your hotel?"
/>

Common input field properties:

PropertyTypeDescription
autofocusBooleanFocus input field after rendering component.
placeholderStringA text to be shown on textfield, mainly to explain what should be entered.
upper-caseBooleanTransform input to upper case.
lower-caseBooleanTransform input to lower case.

Also note you can use the native DOM attributes of an input: “name”, “maxlength”, “autocomplete” and so on.

Common input frame properties:

PropertyTypeDescription
prefixStringA text that should be shown before the textfield.
suffixStringA text that should be shown after the textfield.
float-labelStringA text label that will “float” up above the input field, once the input field gets focus.
stack-labelStringA text label that will be shown above the input field and is static.
colorStringOne from Quasar Color Palette.
invertedBooleanInverted mode. Color is applied to background instead.
inverted-lightBooleanInverted mode with a light color. Color is applied to background instead.
hide-underlineBooleanHides the bottom border.
darkBooleanIs QSearch rendered on a dark background?
alignStringOne of ‘left’, ‘center’ or ‘right’ which determines the text align within textfield.
disableBooleanIf set to true, textfield is disabled and the user cannot type anything.
warningBooleanIf set to true, the input fields colors are changed to show there is a warning.
errorBooleanIf set to true, the input fields colors are changed to show there is an error.
beforeArray of ObjectsIcon buttons on left side of input frame. Read below more details.
afterArray of ObjectsIcon buttons on right side of input frame. Read below more details.
no-parent-fieldBooleanAvoid trying to connect to a parent QField.

Icon buttons

This section refers to before and after properties which can add additional buttons such as icons to the textfield. Here is the structure of the two properties:

{
// required icon
icon: String,
// required function to call when
// icon is clicked/tapped
handler: Function,

// Optional. Show icon button
// if model has a value
content: Boolean,

// Optional. Show icon button
// if textfield is marked with error
error: Boolean
}

Examples:

<!--
Show an icon button (with 'warning' as icon)
when there is an error on QInput (through "error" prop)
-->
<q-search
v-model="text"
:after="[
{
icon: 'warning',
error: true,
handler () {
// do something...
}
}
]"
/>

<!--
Show an icon button (with 'attach_file' as icon)
when the model has a non empty value
-->
<q-search
v-model="text"
:after="[
{
icon: 'attach_file',
content: true,
handler () {
// do something...
}
}
]"
/>

Lazy Input

Vue will soon supply the .lazy modifier for v-model on components too, but until then, you can use the longer equivalent form:

<q-search
:value="model"
@change="val => { model = val }"
/>

Vue Methods

Vue MethodDescription
clear()Resets the model to an empty string.
clearAndFocus()Resets the model to an empty string and gives the input focus.
focus()Focused the textfield.
blur()Makes textfield lose focus.
select()Selects all textfield text and focuses.

Vue Events

Vue EventDescription
@input(newVal)Triggered immediately on model value change.
@change(newVal)Triggered on lazy model value change.
@clear(clearVal)Triggered when the model is cleared.
@focusTriggered on focus.
@blurTriggered a blur.
@keydownTriggered by keydown event on textfield.
@keyupTriggered by keyup event on textfield.
@clickTriggered by a native click event on textfield.
@paste(v0.17.10+) Triggered by a paste event on the textfield.

Coloring

Use the color prop with one of the Quasar colors from the Color Palette, like primary, secondary, orange-7, teal-2:

<q-search color="orange" v-model="search" />

Use the inverted prop, to change the background of the input to the color.

<q-search inverted color="orange" v-model="search" />

Error State

Use the error prop to show there has been an error. This will turn the component color to red.

<q-search error v-model="search" />
<q-search :error="hasError" inverted v-model="search" />

Disable

Use the disable prop to stop user input.

<q-search disable v-model="search" color="primary" />

Usage with Layout

If you’d like to set search within a QToolbar on QLayout:

<q-layout>
...
<!--
Notice we set a color for QToolbar and
QSearch has "inverted" and color="none" specified.
This makes QSearch use background color set by QToolbar.
-->
<q-toolbar slot="header" color="primary">
<q-search inverted color="none" v-model="search" />
</q-toolbar>
...
</q-layout>

Formatting

It is possible to add formatting to a QSearch in two ways. One is for the basic component. The other is with the QField component. Both methods offer “inverted” coloring.

Additional Vue Properties

PropertyTypeDescription
colorStringThe color the QInput should have. The default is primary.
invertedBooleanSet to true, to color field’s background set by the color prop.
darkBooleanSet to true, if the field is on a dark background. It will invert the text color to make it light.
alignTextControls the ‘right’, ‘center’ or ‘left’ alignment of the input. The default is ‘left’.

Basic Formatting Examples

This will color the field black.

<q-search v-model="text" float-label="Colored" color="black" />

This will show an inverted colored input field in amber. Here, the text is automatically inverted to a lighter color.

<q-search v-model="text" inverted color="amber" stack-label="Amber Colored Background" />

Alignment

You can also align the input to the right, center or left. The default is left. The example below will show a field for Euro currency input.

<!-- Align textfield content to the right -->
<q-search v-model="text" align="right" />

Basic Usage with QField

It is also possible to further enhance a QInput by wrapping it in a QField component.

<div class="bg-grey-9" style="width: 500px; padding: 25px">
<q-field
icon="wifi"
label="Some Label"
:count="10"
helper="Some helper"
:error="error"
error-label="Some error"
>
<q-search
v-model="text"
dark
inverted
color="black"
float-label="Textfield"
/>
</q-field>
</div>

The above usage of QField will show the input field within a dark grey background and an inverse white text. Notice the usage of the dark prop for QInput. This controls the inversion of the text color.

Please refer to the QField documentation for more info about its usage.