scoped
Textarea extends the capabilities of the standard HTML textarea element. It adds styles to achieve a visually consistent user interface and offers features such as auto-height - adjusting the height of an element to the inserted text, or also a counter for inserted characters.
This example shows the textarea in its default state without a counter, auto-height, or other enhancements.
Adding the standard attribute will display a textarea in the style of the standard HTML textarea element.
Adding the counter attribute will display a counter below the textarea showing the number of characters inserted and the maximum number of characters allowed. It is to be used in combination with the max-length property. Otherwise, the maximum number allowed will be set to 1000.
The resize property specifies the behavior of element resizing. If set to none, the field size remains fixed.
If the resize property is set to auto, the size of the element is automatically adjusted to the inserted content.
When the disabled attribute is inserted into the textarea element, it will not be possible to write.
Use wje-textarea when users need to enter values, choose options, or trigger form-related actions.
Do not use it as a decorative element without interaction. Prefer presentational components in that case.
Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.
- Keep validation rules and error behavior consistent across the entire form.
- Show loading or disabled states during async operations.
- Split complex forms into smaller sections with immediate feedback.
| Description | Disables user interaction with the component. |
| Attribute | disabled |
| Type | boolean |
| Default | - |
| Description | Controls validation or status messaging for invalid. |
| Attribute | invalid |
| Type | boolean |
| Default | false |
| Description | Retrieves the value of the 'label' attribute if it exists. If the 'label' attribute is not set, it returns false. |
| Attribute | label |
| Type | string |
| Default | false |
| Description | Sets the field name used when submitting form data. |
| Attribute | name |
| Type | any |
| Default | - |
| Description | Sets placeholder text shown when the value is empty. |
| Attribute | placeholder |
| Type | any |
| Default | - |
| Description | Prevents the value from being edited by the user. |
| Attribute | readonly |
| Type | boolean |
| Default | - |
| Description | Marks the component as required for form validation. |
| Attribute | required |
| Type | boolean |
| Default | - |
| Description | Sets the number of visible text rows. |
| Attribute | rows |
| Type | any |
| Default | - |
| Description | Sets the validateOnChange property. If set to a truthy value, it adds the validate-on-change attribute to the element. If set to a falsy value, it removes the validate-on-change attribute from the element. |
| Attribute | validate-on-change |
| Type | boolean |
| Default | false |
| Description | Getter for the value attribute. |
| Attribute | value |
| Type | string |
| Default | - |
| Name | Description |
|---|
wje-textarea:change | Emitted when the component value changes. |
wje-textarea:input | Emitted when the input value changes. |
No public methods available for this component.
| Name | Description |
|---|
native | The native textarea wrapper. |
input | The textarea input. |
wrapper | The textarea wrapper. |
| Name | Description |
|---|
--wje-textarea-font-family | Specifies the font family used for the textarea. Accepts any valid CSS font-family value. |
--wje-textarea-background-color | Sets the background color of the textarea. Accepts any valid CSS color value. |
--wje-textarea-color | Defines the text color within the textarea. Accepts any valid CSS color value. |
--wje-textarea-color-invalid | Changes the text color of the textarea when it is invalid. Useful for highlighting validation errors. |
--wje-textarea-border-width | Specifies the width of the textarea's border. Accepts any valid CSS length unit. |
--wje-textarea-border-style | Sets the style of the textarea's border. Accepts standard CSS border styles such as solid, dashed, or dotted. |
--wje-textarea-border-color | Defines the border color of the textarea. Accepts any valid CSS color value. |
--wje-textarea-border-color-focus | Specifies the border color of the textarea when it is focused. Enhances the user experience by providing visual feedback. |
--wje-textarea-border-radius | Determines the border radius of the textarea, defining how rounded its corners are. Accepts any valid CSS length unit. |
--wje-textarea-margin-bottom | Sets the bottom margin of the textarea. Ensures spacing between the textarea and other elements. |
--wje-textarea-line-height | Specifies the line height of the text within the textarea. Helps control the vertical spacing of the text. |
--wje-textarea-padding | Defines the padding inside the textarea. Controls the spacing between the content and the border. |
No slots available for this component.