Checkbox

shadow

Checkbox, alebo tiež začiarkavacie políčko, je element, ktorý umožňuje používateľom vybrať jednu alebo viac možností z množiny. Kliknutím na checkbox zmeníte jeho stav na true alebo false.

Základné použitie

Placement End

Color

Indeterminate checkbox

Po pridaní atribútu indeterminate sa zobrazí checkbox, ktorého predvolený stav je neutrálny, tzn. ani true ani false.

Variant

Pridaní atribútu variant s hodnotou circle zobrazíte checkbox v okrúhlom tvare.

Kedy použiť

Použite wje-checkbox, 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

checked

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

disabled

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

value

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

indeterminate

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

required

Popis	Označí komponent ako povinný pre validáciu formulára.
Atribút	required
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｜null
Predvolené	-

Udalosti

Názov	Popis
wje-toggle:input	Vyvolá sa pri zmene vstupnej hodnoty.
wje-toggle:change	Vyvolá sa pri zmene hodnoty komponentu.

Metódy

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS tieňové časti

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

CSS vlastné premenné

Názov	Popis
--wje-checkbox-border-radius	Vlastná CSS premenná, ktorá riadi zaoblenie rohov.
--wje-checkbox-border-width	Vlastná CSS premenná, ktorá riadi border width.
--wje-checkbox-border-style	Vlastná CSS premenná na štýlovanie komponentu (border style).
--wje-checkbox-border-color	Vlastná CSS premenná, ktorá riadi border color.
--wje-checkbox-margin-inline	Vlastná CSS premenná, ktorá riadi margin inline.

Sloty

Názov	Popis
default	Predvolený slot pre hlavný obsah komponentu.