Documentation
Documentation Hub

BaseTextarea

Textarea shapes

Textareas can have different shapes. Use the shape prop to change the shape of the textarea component.

Default shape of all <BaseTextarea> can be set in your .app/app.config.ts.
Show code

Floating label

Textareas can have floating labels. Use the label-float prop to enable the floating label.

Show code

Textarea small

Textareas can be shown smaller. Use the size prop with the sm value to make it smaller.

Show code

Textarea focus

Textareas can have a primary colored focus. Use the color-focus prop to enable the colored focus.

Show code

Loading state

Textareas can be shown in a loading state. Use the loading prop to enable the loading state.

Show code

Disabled state

Textareas can be shown disabled. Use the disabled prop to disable the textarea.

Show code

Error state

Textareas can be shown in an error state. Use the error prop to show the error and the error message.

Please fill up the message
Show code

Custom addons

Textareas can have custom addons. Use the addon slot to add your own custom addons.

Maya

Show code

#<BaseTextarea>

Model

v-model
The model value of the textarea.

@example

`v-model="value"`

@example

`v-model.trim="value"`

Show example

Properties

name
The name of the textarea.
Show example
size
The size of the textarea.
Show example
label
The label for the textarea.
Show example
id
The form input identifier.
Show example
shape
The shape of the textarea.
Show example
error
The error message for the textarea, or whether it is in an error state.
Show example
classes
A set of classes to apply to the various elements of the textarea.
Show example
contrast
The contrast of the textarea.
Show example
placeholder
The placeholder text for the textarea.
Show example
rows
The number of rows to display in the textarea.
Show example
disabled
Whether the textarea is disabled.
Show example
loading
Whether the textarea is in a loading state.
Show example
label-float
If the label should be floating.
Show example
color-focus
Whether to apply the focus color to the textarea.
Show example
readonly
Whether the textarea is read-only.
Show example
addon
Whether to display an addon element in the textarea.
Show example
resize
Whether to allow the user to resize the textarea.
Show example
autogrow
Whether to automatically grow the textarea as text is entered.
Show example

Slots

#label
Show example
#addon
Show example

Exposed

modelModifiers
Used internaly to allow v-model.trim
Show example
el
The underlying HTMLTextAreaElement element.
Show example
fitSize
A method to resize the textarea to fit its content.
Show example