Input

scoped

Input element extends the capabilities of standard HTML input with advanced features and customization options.

Basic usage

The sample shows the input in its base state without the extended modes to make the default behavior and markup clear.

Use in the form

The sample embeds the input into the actual form, so you can see the submit flow and the binding to the normal form behavior.

Variant: standard

Input also supports the visual of standard HTML input by adding the variant property with the value standard.

Number

The sample shows type="number" with a decimal step step="0.01" and inputmode="decimal". It compares the clearable variant with the plain one; when clearable is used, the native number controls remain visible and the clear button is placed before them.

Standard in the form

The sample combines the standard input variant with the form context to show how it behaves in a standard form layout.

Search

In combination with the Button elementorm, it creates a full-featured search box.

Pickers

The sample interfaces wje-input with the wje-icon-picker and wje-color-picker components via wje-dropdown in the start slot. The trigger remains part of the input, the picker opens as an overlay and after the picker dispatches a select event that immediately updates the value of the parent input.

Clearable

In combination with the Button elementorm, it creates a full-featured search box.

Clearable input reserves room for the clear button even with long values. With type="number" it also accounts for native number controls, so the clear button does not overlap the value steppers.

When to use

Use wje-input when the user enters a value, selects options, or performs an action on 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

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

Events

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

Methods

hasSlot

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

CSS shadow parts

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 custom variables

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.

Slots

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