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
Inline
Adding the inline property arranges the elements in a horizontal layout.
Styling
color
Using the color property it is possible to change the color of the radio element.
When to use
Use wje-radio when users need to enter values, choose options, or trigger form-related actions.
When not to use
Do not use it as a decorative element without interaction. Prefer presentational components in that case.
Accessibility
Always provide a label (label/aria-label), keep keyboard support, and surface clear validation feedback.
Best Practices
- Keep validation rules and error behavior consistent across the entire form.
- Show loading or disabled states during async operations.
- Split complex forms into smaller sections with immediate feedback.
Attributes and Properties
checked
| Description | Gets the checked property of the radio button. |
| Attribute | checked |
| Type | boolean |
| Default | - |
disabled
| Description | Disables user interaction with the component. |
| Attribute | disabled |
| Type | boolean |
| Default | - |
value
| Description | Sets the current value of the component. |
| Attribute | value |
| Type | any |
| Default | - |
Events
| Name | Description |
|---|---|
wje-radio:change | Dispatched when the radio button's state changes. |
wje-radio:input | Dispatched when the radio button is interacted with. |
Methods
No public methods available for this component.
CSS Shadow Parts
| Name | Description |
|---|---|
native-radio | The native wrapper for the radio button. |
CSS Custom Properties
| Name | Description |
|---|---|
--wje-radio-margin-inline | Specifies the horizontal (left and right) margin for the radio button. Accepts any valid CSS length unit (e.g., px, rem, %) to control spacing on both sides of the component. |
--wje-radio-margin-top | Defines the top margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing above the component. |
--wje-radio-margin-bottom | Sets the bottom margin for the radio button. Accepts any valid CSS length value to adjust vertical spacing below the component. |
Slots
| Name | Description |
|---|---|
default | Default slot for the radio button label content. |