Aqua DS - Component Library

Quick Start

Framework Implementation

WebComponents

Vue 3

React

Angular

Components

Data Types

Directives

Style Customization

Theming

Custom Styles

Icons

FAQ

Aqua Basis

Aqua Composition

The AqRadioGroup component is a container element used to manage and render a collection of radio elements. It provides a consistent structure for grouping related options, handling selection states, and improving accessibility.

By using AqRadioGroup, you can easily configure multiple radio elements through the options prop, which maps directly to the props of individual radio components. This approach ensures cleaner code, better form integration, and a predictable API across frameworks.

<aq-radio-group
  id="rd-grp-1"
  orientation="vertical"
  label="This is a radio common group"
  info="This is an information tooltip"
  is-required
  return-mode="originalObject"
  helper-text="This is a helper text">
</aq-radio-group>

Untitled

Props and Attributes

Prop / Attr Type Default Description
label string '' Main label text displayed next to the radio.
info string '' Tooltip text.
isRequired boolean false Displays an asterisk (*) indicating that the field is required.
isDisabled boolean false Disables interaction with the radio.
tooltipWidth string '' Sets the width for the tooltip associated with the component label info icon.
helperText boolean '' Provides additional guidance or context for the radio group.

Typically displayed below the radio elements to help the user understand their choices. | | returnMode | valueName | originalObject | valueName | Defines the format of the value returned when a radio option is selected.

Use valueName to return the option's string value, or originalObject to return the full option object as provided in the options array. | | type | radio | radio-button | radio-card | radio | Type of the radio elements inside the radio group. | | orientation | horizontal | vertical | horizontal | Defines how the radios are arranged within the group.

Use horizontal to display them side by side, or vertical to stack them in a column. | | options | array | [] | Defines the list of radio elements to render within the group.

Each option must be provided as an object, where the properties match the props of the AqRadioButton component (e.g., id-radio, name, label, etc.).

This allows you to configure each radio in the group the same way you would configure a standalone radio element. |

PlayGround

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:

👉 Open full playground

https://aqua-ds-playground.masivianlabs.com/doc-storybook/index.html?path=/story/components-forms-aqradiogroup--default&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>

Events

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 Types

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)

Variants

To use each of the Radio Variants (AqRadio, AqRadioButton and AqRadioCard) ****inside a Radio Group, you must provide the options prop as an array of objects. Each object represents a single Radio, and its properties should match the props of the standalone Radio Variant component.

// Example radio group options using the radio-card variant
const radioGroupOptions = [
  {
    label: "Completed",
    value: "option1",
    subLabel: "This is a sublabel ",
    info: "This is short tooltip",
    icon: "aq-icon-message",
    disabled: true,
  },
  {
    label: "Rachel",
    value: "option2",
    icon: "aq-icon-message",
    subLabel: "This is a sublabel ",
    info: "This is long tooltip to allow the multiline variant of the component",
    tooltipWidth: "100px",
  },
  {
    label: "Chandler",
    value: "option3",
    subLabel: "This is a long sublabel to test multiline"
  }
]

AqRadioButton

See AqRadioButton to know the list of props and proper usage.

Example options inside AqRadioGroup

// Example radiogroup options using the radio-button variant
const radioGroupOptions = [
  {
    label: "Completed",
    value: "option-1",
    info: "This is short tooltip",
    icon: "aq-icon-message",
    disabled: true,
  },
  {
    label: "Rachel",
    value: "option-2",
    icon: "aq-icon-message",
    info: "This is long tooltip to allow the multiline variant of the component",
    tooltipWidth: "100px",
  },
  {
    label: "Chandler",
    value: "option-3",
  }
]

Events

All events are emitted by the aq-radio-group.

AqRadioCard

See AqRadioCard to know the list of props and proper usage.

Example options inside AqRadioGroup

// Example radio group options using the radio-card variant
const radioGroupOptions = [
  {
    label: "Completed",
    value: "option-1",
    subLabel: "This is a sublabel ",
    icon: "aq-icon-message",
    disabled: true,
  },
  {
    label: "Rachel",
    value: "option-2",
    icon: "aq-icon-message",
    subLabel: "This is a sublabel ",
    tooltipWidth: "100px",
  },
  {
    label: "Chandler",
    value: "option-3",
  }
]

Events

All events are emitted by the aq-radio-group.

Binding Support by Framework

AqRadioGroup works seamlessly with the two-way binding mechanisms provided by frameworks. This allows the group to stay in sync with your application state, making it easier to manage selected values and integrate with forms while keeping the API consistent across different frameworks.

| --- | --- | --- | --- |

In Frameworks

Web Components

<aq-radio-group
  id="aq-radio-group-test"
  orientation="vertical"
  type="radio-card"
  label="This is a radio"
  info="This is an information tooltip"
  is-required
  helper-text="This is a helper text"
>
</aq-radio-group>

<script>
  const radioGroupElement = document.getElementById('aq-radio-group-test');
  const radioGroupOptions = [
    {
      label: "Completed",
      value: "option-1",
      subLabel: "This is a sublabel ",
      info: "This is short tooltip",
      icon: "aq-icon-message",
      disabled: true,
    },
    {
      label: "Rachel",
      value: "option-2",
      icon: "aq-icon-message",
      subLabel: "This is a sublabel ",
      info: "This is long tooltip to allow the multiline variant of the component",
      tooltipWidth: "100px",
      urlImage: '<http://localhost:5173/src/assets/logo.svg>'
    },
    {
      label: "Chandler",
      value: "option-3",
      subLabel: "This is a long sublabel to test multiline"
    }
  ]

  radioGroupElement.options = radioGroupOptions;

  radioGroupElement.addEventListener('change', (event) => {
    console.log('Change event: ', event);
  });
  radioGroupElement.addEventListener('input', (event) => {
    console.log('Input event: ', event);
  });
</script>

Vue

<script lang="ts">
import { AqRadioGroup } from '@aqua-ds/vue';
import { defineComponent, ref } from 'vue';

export default defineComponent({
  components: {
    AqRadioGroup
  },
  setup() {
	  // Set the initial value using the v-model value
    const selectedValue = ref('option-3');

    const options = [
	    {
	      label: "Completed",
	      value: "option-1",
	      subLabel: "This is a sublabel ",
	      info: "This is short tooltip",
	      icon: "aq-icon-message",
	      disabled: true,
	    },
	    {
	      label: "Rachel",
	      value: "option-2",
	      icon: "aq-icon-message",
	      subLabel: "This is a sublabel ",
	      info: "This is long tooltip to allow the multiline variant of the component",
	      tooltipWidth: "100px",
	      urlImage: '<http://localhost:5173/src/assets/logo.svg>'
	    },
	    {
	      label: "Chandler",
	      value: "option-3",
	      subLabel: "This is a long sublabel to test multiline"
	    }
	  ];

    const handleValueChanged = (e: CustomEvent) => {
      console.log('Radio group changed:', e.detail.value);
    };

    return {
      selectedValue,
      handleValueChanged,
      options,
    };
  }
});
</script>

<template>
  <div>
    <aq-radio-group
      :options="options"
      orientation="horizontal"
      label="This is a radio common group"
      info="This is an information tooltip"
      is-required
      return-mode="originalObject"
      helper-text="This is a helper text"
      @change="handleValueChanged"
      v-model="selectedValue"
    >
    </aq-radio-group>

    <span>Selected Value: {{ selectedValue }}</span>
  </div>
</template>

React

import { AqRadioGroup } from '@aqua-ds/react';
import { useState } from 'react';

export const RadioExample = () => {
  const [selectedValue, setSelectedValue] = useState('');
  const [selectedValueObject, setSelectedValueObject] = useState(null);

  const options = [
    {
      label: "Completed",
      value: "option-1",
      subLabel: "This is a sublabel ",
      info: "This is short tooltip",
      icon: "aq-icon-message",
      disabled: true,
    },
    {
      label: "Rachel",
      value: "option-2",
      icon: "aq-icon-message",
      subLabel: "This is a sublabel ",
      info: "This is long tooltip to allow the multiline variant of the component",
      tooltipWidth: "100px",
      urlImage: '<http://localhost:5173/src/assets/logo.svg>'
    },
    {
      label: "Chandler",
      value: "option-3",
      subLabel: "This is a long sublabel to test multiline"
    }
  ];

  const handleValueChanged = (event: any) => {
    console.log('Radio group changed:', event);
    setSelectedValue(event.nativeEvent.detail.value);
  };

  const handleGetOriginalObject = (event: any) => {
    console.log('Radio group originalObject:', event);
    setSelectedValueObject(event.nativeEvent.detail.value);
  };

  return (
    <div>
      <AqRadioGroup
        orientation="horizontal"
        label="This is a radio common group"
        info="This is an information tooltip"
        isRequired
        helperText="This is a helper text"
        options={options}
        onInput={(event) => handleValueChanged(event)}
      ></AqRadioGroup>

      <div>
        <span>Selected Value: {selectedValue}</span>
      </div>

      <AqRadioGroup
        orientation="horizontal"
        label="This is a radio common group with returnMode"
        info="This is an information tooltip"
        isRequired
        helper-text="This is a helper text"
        options={options}
        returnMode="originalObject"
        onInput={(event) => handleGetOriginalObject(event)}
      ></AqRadioGroup>
      
      {JSON.stringify(selectedValueObject, null, 2)}
    </div>
  );
};

Angular

// radio-group-set.component.ts
import { Component } from "@angular/core";
import { AqRadioGroup, AWCValueAccessor } from "@aqua-ds/angular";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
@Component({
  selector: "app-set-radio-group",
  imports: [AqRadioGroup, FormsModule, ReactiveFormsModule, AWCValueAccessor],
  templateUrl: "./set-radio-group.component.html",
})
export class SetRadioGroupComponent {
	// Set initial value using the ngModel value
  selectedValueGroup = "option-2";
  infoRadio = [
    {
      label: "Completed",
      value: "option-1",
      info: "This is short tooltip",
      disabled: true,
      icon: "aq-icon-message",
    },
    {
      label: "Rachel",
      value: "option-2",
      icon: "aq-icon-message",
      info: "This is long tooltip to allow the multiline variant of the component",
      tooltipWidth: "100px",
    },
    {
      label: "Chandler",
      icon: "aq-icon-message",
      value: "option-3",
    },
  ];
  AqChange(ev: any) {
    console.log("ev", ev);
  }
}

<!-- radio-group-set.component.html -->
<div>
  <aq-radio-group
    [(ngModel)]="selectedValueGroup"
    orientation="vertical"
    [options]="infoRadio"
    label="This is a radio"
    info="This is an information tooltip"
    return-mode="originalObject"
    is-required
    helper-text="This is a helper text"
    (input)="AqChange($event)"
  ></aq-radio-group>
  <p>Selected Value: {{ `${selectedValueGroup}` }}</p>
</div>

The AqRadioGroup component is fully compatible with Angular’s [(ngModel)] two-way binding. Support is enabled via native Angular forms and the AWCValueAccessor utility from @aqua-ds/angular.