Aqua Basis
The AqRadioCard 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. |
icon |
string |
'' |
Optional icon to display next to the label. |
isChecked |
boolean |
false |
Sets the radio to a checked state. |
isDisabled |
boolean |
false |
Disables interaction with the radio. |
subLabel |
string |
'' |
Adds a secondary label displayed inside the card. |
Typically used to provide extra context or clarification. |
| 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. |
| 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-card&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 AqRadioCard 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 AqRadioCard 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. ✨
