Input

scoped

Input element rozširuje možnosti štandardného HTML inputu pokročilými funkciami a možnosťami prispôsobenia.

Základné použitie

Použitie vo formulári

Variant: standard

Input podporuje aj vizuál štandardného HTML inputu pridaním vlastnosti variant s hodnotou standard.

Standard vo formulári

Search

V kombinácii s elementorm Button vytvorí plnohodnotné vyhľadávacie pole.

Pickers

V kombinácii s elementorm Button vytvorí plnohodnotné vyhľadávacie pole.

Clearable

V kombinácii s elementorm Button vytvorí plnohodnotné vyhľadávacie pole.

Kedy použiť

Použite wje-input, keď používateľ zadáva hodnotu, vyberá možnosti alebo vykonáva akciu vo formulári.

Kedy nepoužiť

Nepoužívajte ho len ako vizuálny dekoratívny prvok bez interakcie. V takom prípade uprednostnite prezentačné komponenty.

Prístupnosť

Vždy prepojte komponent s popisom (label/aria-label), zachovajte ovládanie klávesnicou a pri validačných chybách zobrazte zrozumiteľnú správu.

Odporúčané postupy

• Majte jednotné validačné pravidlá a error stavy naprieč celým formulárom.
• Pri asynchrónnych operáciách zobrazte stav načítania alebo disabled stav.
• Pri zložitých formulároch preferujte menšie sekcie a okamžitú spätnú väzbu.

Atribúty a vlastnosti

type

Popis	Nastavuje typ vstupu, ktorý riadi spracovanie a validáciu hodnoty.
Atribút	type
Typ	any
Predvolené	-

value

Popis	Nastavuje aktuálnu hodnotu komponentu.
Atribút	value
Typ	string
Predvolené	-

name

Popis	Nastavuje názov poľa pri odoslaní formulára.
Atribút	name
Typ	any
Predvolené	-

disabled

Popis	Vypína používateľskú interakciu s komponentom.
Atribút	disabled
Typ	any
Predvolené	-

placeholder

Popis	Nastavuje zástupný text pri prázdnej hodnote.
Atribút	placeholder
Typ	string
Predvolené	-

label

Popis	Nastavuje zobrazený alebo prístupný textový štítok.
Atribút	label
Typ	string｜boolean
Predvolené	-

message

Popis	Nastavuje pomocný alebo validačný text pod vstupom.
Atribút	message
Typ	any
Predvolené	-

errorInline

Popis	Určuje, či sa validačná chyba zobrazí priamo pri vstupe.
Atribút	error-inline
Typ	any
Predvolené	-

required

Popis	Označí komponent ako povinný pre validáciu formulára.
Atribút	required
Typ	any
Predvolené	-

readonly

Popis	Zabráni používateľovi upravovať hodnotu.
Atribút	readonly
Typ	any
Predvolené	-

invalid

Popis	Riadi validáciu alebo stavové hlášky pre voľbu invalid.
Atribút	invalid
Typ	boolean
Predvolené	false

Udalosti

Názov	Popis
wje-input:input	Vyvolá sa pri zmene vstupnej hodnoty.
wje-input:clear	Vyvolá sa pri vyčistení vstupu alebo výberu.

Metódy

hasSlot

Popis	Overí, či komponent obsahuje slot.
Signatúra	(el: HTMLElement, slotName: string) => boolean

CSS tieňové časti

Názov	Popis
native	Štýluje koreňovú shadow časť komponentu.
wrapper	Štýluje obalovú shadow časť.
input	Štýluje shadow časť input.
clear	Štýluje shadow časť clear.

CSS vlastné premenné

Názov	Popis
--wje-input-font-family	Vlastná CSS premenná, ktorá riadi typografiu.
--wje-input-background-color	Vlastná CSS premenná, ktorá riadi background color.
--wje-input-color	Vlastná CSS premenná, ktorá riadi color.
--wje-input-color-invalid	Vlastná CSS premenná, ktorá riadi color invalid.
--wje-input-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-input-border-color-focus	Vlastná CSS premenná, ktorá riadi border color focus.
--wje-input-border-width	Vlastná CSS premenná, ktorá riadi border width.
--wje-input-border-style	Vlastná CSS premenná na štýlovanie komponentu (border style).
--wje-input-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-input-margin-bottom	Vlastná CSS premenná, ktorá riadi margin bottom.
--wje-input-line-height	Vlastná CSS premenná, ktorá riadi výšku riadku.
--wje-input-slot-padding-inline	Vlastná CSS premenná, ktorá riadi slot padding inline.

Sloty

Názov	Popis
start	Slot pre obsah zobrazený pred hlavným obsahom.
end	Slot pre obsah zobrazený za hlavným obsahom.