Aqua Basis
The AqRadioButton components are used for mutually exclusive choices, not for multiple choices. Only one radio can be selected at a time. When a user chooses a new item, the previous choice is automatically deselected.
As a best practice, it should only be used within the AqRadioGroup to ensure consistent behavior and accessibility
| Prop / Attr | Type | Default | Description |
|---|---|---|---|
label |
string |
'' |
Main label text displayed next to the radio. |
info |
string |
'' |
Tooltip text. |
icon |
string |
'' |
Optional icon to display next to the label. |
tooltipWidth |
string |
'' |
Sets the width for the tooltip associated with the component. |
isChecked |
boolean |
false |
Sets the radio to a checked state. |
isDisabled |
boolean |
false |
Disables interaction with the radio. |
idRadio |
string |
'' |
If no value is passed, it’ll generate a random alpha numeric combination. | Unique identifier assigned to the radio input element.
Useful for linking the radio with its corresponding label or for testing purposes. |
| valueRadio | string | '' | The value attribute assigned to the radio.
This is the value that will be submitted with the form when the radio is checked. |
| name | string | '' | Name attribute of the radio input element. |
| orientation | horizontal | vertical | horizontal | Defines how the radio button is displayed.
Use horizontal to display the icon and label side by side, or vertical to stack them in a column. |
| Event | Description | React | Angular | Vue | Web Components |
|---|---|---|---|---|---|
change |
Triggered when the radio group state changes. Typically, when selecting a radio. | onChange={handleChange} |
(change)="handleChange($event)" |
@change="handleChange" |
addEventListener('change', handler) |
input |
Triggered when the radio group state changes. Typically, when selecting a radio. | onInput={handleInput} |
(input)="handleInput($event)" |
@input="handleInput" |
addEventListener('input', handler) |
| Event | React | Angular | Vue |
|---|---|---|---|
input |
(*event*: React.ChangeEvent<HTMLAqRadioGroupElement> & { nativeEvent: CustomEvent } |
(e:Event) |
(e:CustomEvent) |
change |
(*event*: React.ChangeEvent<HTMLAqRadioGroupElement> & { nativeEvent: CustomEvent } |
(e:Event) |
(e:CustomEvent) |
You can interact with the component and experiment with its attributes and properties directly in this playground.
In the Code tab, the generated code snippet is available.
In addition to the interactive examples in this documentation, you can explore the full playground with all supported options and advanced configurations at the following link:
https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-forms-aqradiogroup--default&args=type:radio-button&nav=0
<aside> ⚠️
Important: The code shown is in Web Component format. If you are using a specific framework (Vue, React, Angular), you must adapt it to the framework’s conventions before using it.
</aside>
The Radio component supports two-way binding through framework wrappers. For more predictable and scalable usage, it is recommended to rely on AqRadioGroup, which provides a consistent API for handling selections and state.
In framework integrations, the Radio component should be used within the context of AqRadioGroup as a best practice. This ensures consistent behavior and alignment with form patterns.
For implementation details, please refer to the AqRadioGroup documentation page. Remember to review the available props when configuring options inside the group.
On this page
✨ Design together. Build together. Speak the same language. ✨
