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.
The preview shows the textarea in its default state without counter, auto-height or other adjustments.
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 the user enters a value, selects options, or performs an action in a form.
Don't just use it as a visual decorative element without interaction. In this case, give priority to the presentation components.
Always link the component to the description (label/aria-label), keep keyboard control, and display a clear message on validation errors.
- 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.
| Popis | Vypína používateľskú interakciu s komponentom. |
| Atribút | disabled |
| Typ | boolean |
| Predvolené | - |
| Popis | Riadi validáciu alebo stavové hlášky pre voľbu invalid. |
| Atribút | invalid |
| Typ | boolean |
| Predvolené | false |
| Popis | Nastavuje zobrazený alebo prístupný textový štítok. |
| Atribút | label |
| Typ | string |
| Predvolené | false |
| Popis | Nastavuje názov poľa pri odoslaní formulára. |
| Atribút | name |
| Typ | any |
| Predvolené | - |
| Popis | Nastavuje zástupný text pri prázdnej hodnote. |
| Atribút | placeholder |
| Typ | any |
| Predvolené | - |
| Popis | Zabráni používateľovi upravovať hodnotu. |
| Atribút | readonly |
| Typ | boolean |
| Predvolené | - |
| Popis | Označí komponent ako povinný pre validáciu formulára. |
| Atribút | required |
| Typ | boolean |
| Predvolené | - |
| Popis | Nastavuje počet viditeľných riadkov textu. |
| Atribút | rows |
| Typ | any |
| Predvolené | - |
| 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 |
| Popis | Nastavuje aktuálnu hodnotu komponentu. |
| Atribút | value |
| Typ | string |
| Predvolené | - |
| Názov | Popis |
|---|
wje-textarea:change | Vyvolá sa pri zmene hodnoty komponentu. |
wje-textarea:input | Vyvolá sa pri zmene vstupnej hodnoty. |
Pre tento komponent nie sú dostupné žiadne verejné metódy.
| Názov | Popis |
|---|
native | Štýluje koreňovú shadow časť komponentu. |
input | Štýluje shadow časť input. |
wrapper | Štýluje obalovú shadow časť. |
| 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. |
Pre tento komponent nie sú dostupné žiadne sloty.