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

Ukážka zobrazuje checkbox v jeho predvolenom stave s bežným labelom. Je to vhodný východiskový bod pre jednoduché formulárové voľby.

Placement End

Ukážka presúva obsah za checkbox na opačnú stranu, čo sa hodí tam, kde potrebujete kompaktnejší alebo hustejší formulárový layout.

Color

Ukážka porovnáva farebné varianty checkboxu, aby bolo jasné, ako sa mení vizuál pri rôznych významových stavoch.

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.

CSS vlastné premenné

Keď potrebujete upraviť obrys alebo rozostup checkboxu bez zásahu do markupu, využite jeho CSS premenné.

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

indeterminate

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

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

required

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

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.