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.
Editing styles
color
Using the color property it is possible to change the color of the radio element.
Attributes and Properties
color
| Description | The color to use from your application's color palette. The default options are "primary", "complete", "success", "warning", "warning" and "neutral". For more information, go to: theming. |
| Attribute | color |
| Type | "danger." ｜ "neutral" ｜ "primary" ｜ "success" ｜ "complete" ｜ "warning" ｜ string ｜ undefined |
| Default | undefined |
checked
| Description | If true, the option is selected. |
| Attribute | checked |
| Type | boolean |
| Default | false |
disabled
| Description | If true, the option cannot be selected. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
indeterminate
| Description | If true, it sets the default state of the radio element to neutral, i.e. neither true nor false. |
| Attribute | indeterminate |
| Type | boolean |
| Default | false |
name
| Description | Specifies the name of the radio element. |
| Attribute | name |
| Type | string |
| Default | this.inputId |
value
| Description | The value of the radio element. |
| Attribute | value |
| Type | string ｜ undefined |
| Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
| Name | Description |
|---|---|
--wj-border-radius-circle | Defines the size of the roundness of the element. |
--wj-radio-margin-bottom | Defines the bottom offset of the element. |
--wj-radio-margin-inline | Right and left offset of the radio element. |
--wj-radio-margin-top | Top offset of the radio element. |
Slots
No slots available for this component.