Radio
The radio element is a modified version of the standard HTML radio element, enhanced with styles to achieve a more visually consistent user interface across devices. It works similarly to a standard radio button and allows users to select one from a set of options. It is used inside the radio group element to add alignment and group them together.
Basic usage
The demo shows the radio in its default state with no additional variants or group behaviour.
Inline
Adding the inline property arranges the elements in a horizontal layout.
Editing styles
color
Using the color property it is possible to change the color of the radio element.
When to use
Use wje-radio 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
checked
| Popis | Určuje, či je voľba checked zapnutá a ovplyvňuje správanie komponentu. |
| Atribút | checked |
| Typ | boolean |
| Predvolené | false |
disabled
| Popis | Vypína používateľskú interakciu s komponentom. |
| Atribút | disabled |
| Typ | boolean |
| Predvolené | false |
value
| Popis | Nastavuje aktuálnu hodnotu komponentu. |
| Atribút | value |
| Typ | any |
| Predvolené | - |
Events
| Názov | Popis |
|---|---|
wje-radio:change | Vyvolá sa pri zmene hodnoty komponentu. |
wje-radio:input | Vyvolá sa pri zmene vstupnej hodnoty. |
Methods
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS shadow parts
| Názov | Popis |
|---|---|
native-radio | Štýluje shadow časť native-radio. |
CSS custom variables
| 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. |
Slots
| Názov | Popis |
|---|---|
default | Predvolený slot pre hlavný obsah komponentu. |