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

Ukážka zobrazuje input v základnom stave bez rozšírených režimov, aby bolo jasné predvolené správanie a markup.

Použitie vo formulári

Ukážka vkladá input do skutočného formulára, takže je vidieť submit flow a väzbu na bežné formové správanie.

Variant: standard

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

Number

Ukážka zobrazuje type="number" s desatinným krokom step="0.01" a atribútom inputmode="decimal". Porovnáva variant s clearable a bez neho; pri clearable ostávajú natívne šípky zachované a tlačidlo na vymazanie je pred nimi.

Standard vo formulári

Ukážka kombinuje štandardný variant inputu s formulárovým kontextom, aby bolo jasné, ako sa správa v bežnom formulárovom layoute.

Search

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

Pickers

Ukážka prepája wje-input s komponentmi wje-icon-picker a wje-color-picker cez wje-dropdown v slote start. Trigger zostáva súčasťou inputu, picker sa otvorí ako overlay a po výbere dispatchne select event, ktorý okamžite aktualizuje hodnotu nadradeného inputu.

Clearable

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

Clearable input rezervuje miesto pre tlačidlo vymazania aj pri dlhých hodnotách. Pri type="number" počíta aj s natívnym number ovládaním, takže clear tlačidlo neprekrýva šípky pre zmenu hodnoty.

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

clearable

Popis	Určuje, či je voľba clearable zapnutá a ovplyvňuje správanie komponentu.
Atribút	clearable
Typ	boolean
Predvolené	false

customErrorDisplay

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

disabled

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

errorInline

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

inputmode

Popis	Riadi správanie voľby inputmode v komponente.
Atribút	inputmode
Typ	any
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

max

Popis	Nastavuje maximálnu povolenú hodnotu.
Atribút	max
Typ	any
Predvolené	-

message

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

min

Popis	Nastavuje minimálnu povolenú hodnotu.
Atribút	min
Typ	any
Predvolené	-

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	string
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é	-

step

Popis	Riadi správanie voľby step v komponente.
Atribút	step
Typ	any
Predvolené	-

type

Popis	Nastavuje typ vstupu, ktorý riadi spracovanie a validáciu hodnoty.
Atribút	type
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é	-

variant

Popis	Nastavuje ARIA metadáta, ktoré zlepšujú prístupnosť pre asistenčné technológie.
Atribút	variant
Typ	string
Predvolené	default

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-error-background-color	Vlastná CSS premenná, ktorá riadi error background color.
--wje-input-error-color	Vlastná CSS premenná, ktorá riadi error color.
--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.