QTextarea 📝
The QTextarea is a component that is used to get user input in a multi-line text field.
Examples
Template:
<template>
<q-textarea v-model="value" />
</template>
2
3
Component instance:
export default {
setup() {
const value = ref('');
return {
value
};
}
};
2
3
4
5
6
7
8
Props
modelValue
- Type:
String - Default:
null
Binding value.
disabled
- Type:
Boolean - Default:
false
Whether textarea is disabled.
<template>
<q-textarea
v-model="value"
disabled
/>
</template>
2
3
4
5
6
autosize
- Type:
Boolean|Object - Default:
true
Whether textarea has an adaptive height. Helps to control min and max rows count.
type QTextareaPropAutosize = Nullable<
boolean | { minRows: number; maxRows: number }
>;
2
3
<template>
<q-textarea
v-model="value"
:autosize="{ minRows: 6, maxRows: 8 }"
/>
</template>
2
3
4
5
6
resize
- Type:
'vertical' | 'horizontal' | 'both' | 'none' - Default:
'vertical'
Control the resizability. As native resize attribute.
NOTE
The resize works only if autosize is false:
<template>
<q-textarea
v-model="value"
resize="horizontal"
:autosize="false"
>
</template>
2
3
4
5
6
7
showSymbolLimit
- Type:
Boolean - Default:
false
Shows the symbol's counter.
NOTE
The maxlength attribute is required:
<template>
<q-textarea
v-model="value"
maxlength="100"
show-symbol-limit
>
</template>
2
3
4
5
6
7
validateEvent
- type
boolean - Default
false
If textarea wrapped in QFormItem, prop validateEvent defines if textarea change event will be validated immediately
Attributes
QTextarea support native textarea attrubutes:
- placeholder
- maxlength
- autocomplete
- readonly
.. and others
p.s textarea has a lot of attributes, we can't claim QTextarea 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.