Skip to main content

Textarea

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.

Basic usage

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.

Attributes and Properties

value

DescriptionHodnota textarea.
Attributevalue
Typestring
Defaultundefined

invalid

DescriptionOznačuje, či je vstup neplatný.
Attributeinvalid
Typeboolean
Defaultundefined

placeholder

DescriptionZástupný text v textarea.
Attributeplaceholder
Typestring
Defaultundefined

rows

DescriptionPočet riadkov textarea.
Attributerows
Typenumber
Defaultundefined

spellcheck

DescriptionAk true, v textarea bude zapnutá kontrola pravopisu.
Attributespellcheck
Typeboolean
Defaultundefined

resize

DescriptionRežim zmeny veľkosti (auto alebo none).
Attributeresize
Typestring
Defaultundefined

counter

DescriptionAk true, zobrazí sa počítadlo znakov.
Attributecounter
Typeboolean
Defaultundefined

maxLength

DescriptionMaximálny počet znakov.
AttributemaxLength
Typenumber
Defaultundefined

Events

NameDescription
undefinedUdalosť zmeny (klasický change).
undefinedUdalosť pri zadávaní znakov (input).
undefinedUdalosť neplatného vstupu.

Methods

setTextareaHeight

DescriptionNastaví výšku textarea pri automatickej zmene veľkosti.
Signature() => void

counterFn

DescriptionAktualizuje počítadlo znakov.
Signature(e: Event) => void

validateInput

DescriptionOverí validitu vstupu a nastaví chyby.
Signature() => void

propagateValidation

DescriptionPropaguje stav validácie a vyvolá udalosť invalid.
Signature() => void

formAssociatedCallback

DescriptionCallback pri pripojení k formuláru – napojí odoslanie a validáciu.
Signature(form: HTMLFormElement) => void

formResetCallback

DescriptionCallback pri resetovaní formuláru – obnoví predvolenú hodnotu.
Signature() => void

formStateRestoreCallback

DescriptionCallback pri obnove stavu – obnoví uloženú hodnotu a validitu.
Signature(state: any) => void

formStateSaveCallback

DescriptionCallback pri ukladaní stavu – vráti aktuálnu hodnotu.
Signature() => any

CSS Shadow Parts

NameDescription
nativeObal natívneho textarea.
wrapperObal vstupného poľa.
inputVlastný textarea element.

CSS Custom Properties

NameDescription
--wje-textarea-font-familyRodina písiem používaná v textarea.
--wje-textarea-background-colorPozadie textarea.
--wje-textarea-colorFarba textu v textarea.
--wje-textarea-border-widthŠírka rámika textarea.
--wje-textarea-border-styleŠtýl rámika textarea.
--wje-textarea-border-colorFarba rámika textarea.
--wje-textarea-border-color-focusFarba rámika pri focus.
--wje-textarea-border-radiusPolomer zaoblenia rohov textarea.
--wje-textarea-color-invalidFarba textu pri neplatnom vstupe.
--wje-textarea-margin-bottomOdsadenie spodnej časti textarea.
--wje-textarea-paddingVnútorný odsadzovací priestor textarea.
--wje-textarea-line-heightVýška riadku textu.

Slots

NameDescription
``Predvolený slot pre obsah (text).
startSlot pre prvý slotted element (napr. ikona vľavo).
endSlot pre druhý slotted element (napr. ikona vpravo).