Textarea
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.
Basic usage
The preview shows the textarea in its default state without counter, auto-height or other adjustments.
Multiline values
Set text through the value property or attribute. Since 0.11.0, the component preserves line
breaks, blank lines and a trailing newline during its initial render. When saving and reopening,
use textarea.value directly; do not replace \n characters with HTML <br> tags.
The example saves text as JSON in memory and creates a new textarea with the saved value. Edit the
paragraphs or the literal text <br> & text to check that they survive. HTML in the value remains
plain text.
Standard
Adding the standard attribute will display a textarea in the style of the standard HTML textarea element.
Counter
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.
Resize (none)
The resize property specifies the behavior of element resizing. If set to none, the field size remains fixed.
Resize (auto)
If the resize property is set to auto, the size of the element is automatically adjusted to the inserted content.
Disabled
When the disabled attribute is inserted into the textarea element, it will not be possible to write.
When to use
Use wje-textarea when the user enters a value, selects options, or performs an action in a form.
When not to use
Don't just use it as a visual decorative element without interaction. In this case, give priority to the presentation components.
Accessibility
Always link the component to the description (label/aria-label), keep keyboard control, and display a clear message on validation errors.
Recommended practices
- Keep validation rules and error states consistent across the entire form.
- For asynchronous operations, display the load status or disabled status.
- For complex forms, prefer smaller sections and immediate feedback.
Attributes and properties
disabled
| Popis | Vypína používateľskú interakciu s komponentom. |
| Atribút | disabled |
| Typ | boolean |
| Predvolené | - |
invalid
| Popis | Riadi validáciu alebo stavové hlášky pre voľbu invalid. |
| Atribút | invalid |
| Typ | boolean |
| Predvolené | false |
label
| Popis | Nastavuje zobrazený alebo prístupný textový štítok. |
| Atribút | label |
| Typ | string |
| Predvolené | false |
name
| Popis | Nastavuje názov poľa pri odoslaní formulára. |
| Atribút | name |
| Typ | any |
| Predvolené | - |
placeholder
| Popis | Nastavuje zástupný text pri prázdnej hodnote. |
| Atribút | placeholder |
| Typ | any |
| Predvolené | - |
readonly
| Popis | Zabráni používateľovi upravovať hodnotu. |
| Atribút | readonly |
| Typ | boolean |
| Predvolené | - |
required
| Popis | Označí komponent ako povinný pre validáciu formulára. |
| Atribút | required |
| Typ | boolean |
| Predvolené | - |
rows
| Popis | Nastavuje počet viditeľných riadkov textu. |
| Atribút | rows |
| Typ | any |
| Predvolené | - |
validateOnChange
| Popis | Určuje, či je voľba validate-on-change zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | validate-on-change |
| Typ | boolean |
| Predvolené | false |
value
| Popis | Nastavuje aktuálnu hodnotu komponentu. |
| Atribút | value |
| Typ | string |
| Predvolené | - |
Events
| Názov | Popis |
|---|---|
wje-textarea:change | Vyvolá sa pri zmene hodnoty komponentu. |
wje-textarea:input | Vyvolá sa pri zmene vstupnej hodnoty. |
Methods
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS shadow parts
| Názov | Popis |
|---|---|
native | Štýluje koreňovú shadow časť komponentu. |
input | Štýluje shadow časť input. |
wrapper | Štýluje obalovú shadow časť. |
CSS custom variables
| Názov | Popis |
|---|---|
--wje-textarea-font-family | Vlastná CSS premenná, ktorá riadi typografiu. |
--wje-textarea-background-color | Vlastná CSS premenná, ktorá riadi background color. |
--wje-textarea-color | Vlastná CSS premenná, ktorá riadi color. |
--wje-textarea-color-invalid | Vlastná CSS premenná, ktorá riadi color invalid. |
--wje-textarea-error-background-color | Vlastná CSS premenná, ktorá riadi error background color. |
--wje-textarea-error-color | Vlastná CSS premenná, ktorá riadi error color. |
--wje-textarea-border-width | Vlastná CSS premenná, ktorá riadi border width. |
--wje-textarea-border-style | Vlastná CSS premenná na štýlovanie komponentu (border style). |
--wje-textarea-border-color | Vlastná CSS premenná, ktorá riadi border color. |
--wje-textarea-border-color-focus | Vlastná CSS premenná, ktorá riadi border color focus. |
--wje-textarea-border-radius | Vlastná CSS premenná, ktorá riadi zaoblenie rohov. |
--wje-textarea-margin-bottom | Vlastná CSS premenná, ktorá riadi margin bottom. |
--wje-textarea-line-height | Vlastná CSS premenná, ktorá riadi výšku riadku. |
--wje-textarea-padding | Vlastná CSS premenná, ktorá riadi padding. |
Slots
Pre tento komponent nie sú dostupné žiadne sloty.