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
This example shows the radio in its default state without extra variants or grouping behavior.
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 | Controls whether checked is enabled and affects component behavior. |
| Attribute | checked |
| Type | boolean |
| Default | false |
disabled
| Description | Set checked attribute. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
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. |