Documentation
Documentation Hub

Radius

Textareas can have different radius factors. Use the rounded prop to change the radius of the textarea component.

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

Contrast:default+

Textareas can have different contrasts. Use the contrast prop to change the contrast of the textarea component.

Show code

Contrast:muted

Textareas can have different contrasts. Use the contrast prop to change the contrast of the textarea component.

Show code

Contrast:muted+

Textareas can have different contrasts. Use the contrast prop to change the contrast of the textarea component.

Show code

Label:float

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

Show code

Focus

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

Show code

Error

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

Please enter a message
Please enter a message
Show code

Loading

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

Show code

Disabled

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

Show code

Custom addons

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

Maya

Maya

Show code

#<BaseTextarea>

Model

v-model
Show example

Properties

rounded
The radius of the textarea.

@since

2.0.0

@default

'sm'

Show example
size
The size of the textarea.

@default

'md'

Show example
label
The label for the textarea.
Show example
id
The form input identifier.
Show example
contrast
The contrast of the textarea.

@default

'default'

Show example
classes
A set of classes to apply to the various elements of the textarea.
Show example
placeholder
The placeholder text for the textarea.
Show example
error
The error message for the textarea, or whether it is in an error state.
Show example
name
The name of the textarea.
Show example
rows
The number of rows to display in the textarea.
Show example
max-height
The maximum height of the textarea when autogrow is enabled.
Show example
loading
Whether the textarea is in a loading state.
Show example
disabled
Whether the textarea is disabled.
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

el
The underlying HTMLTextAreaElement element.
The underlying HTMLTextAreaElement element.
Show example
fitSize
A method to resize the textarea to fit its content.
A method to resize the textarea to fit its content.
Show example