Radio

shadow

Radio element je upravená verzia štandardného HTML radio elementu, rozšírená o štýly pre dosiahnutie vizuálne konzistentnejšieho používateľského rozhrania naprieč rôznymi zariadeniami. Funguje podobne ako štandardné rádio tlačidlo a umožňuje používateľom vybrať jednu z množiny možností. Používa sa vo vnútri elementu radio group, ktorý im pridáva zarovnanie a zoskupuje ich do jedného celku.

Základné použitie

Inline

Pridaním vlastnosti inline sa elementy usporiadajú v horizontálnom rozložení.

Úprava štýlov

color

Pomocou vlastnosti color je možné zmeniť farbu radio elementu.

Kedy použiť

Použite wje-radio, 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	boolean
Predvolené	-

value

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

Udalosti

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

Metódy

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

CSS tieňové časti

Názov	Popis
native-radio	Štýluje shadow časť native-radio.

CSS vlastné premenné

Názov	Popis
--wje-radio-margin-inline	Vlastná CSS premenná, ktorá riadi margin inline.
--wje-radio-margin-top	Vlastná CSS premenná, ktorá riadi margin top.
--wje-radio-margin-bottom	Vlastná CSS premenná, ktorá riadi margin bottom.

Sloty

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