igx-radio-group does not align label correctly

[kdinev]

Description

I have an igx-radio-group component with 4 igx-radio buttons and a label. The label is not aligned with the radio buttons.

• igniteui-angular version: 19.1.4
• browser: all

Steps to reproduce

1. Define an igx-radio-group like this:

  <igx-radio-group [(ngModel)]="matchInEdit.player1Race" required>
    <label igxLabel i18n>SC2 race</label>
    <igx-radio [value]="0" i18n>Random</igx-radio>
    <igx-radio [value]="1" i18n>Protoss</igx-radio>
    <igx-radio [value]="2" i18n>Terran</igx-radio>
    <igx-radio [value]="3" i18n>Zerg</igx-radio>
  </igx-radio-group>

2. Run the app

Result

The label and radio buttons are misaligned.

Expected result

Label and radio buttons should be aligned.

Attachments

[simeonoff]

@sdimchevski Can we add this pattern to the UI kit patterns? How long do you think it will take so we can base the implementation on the design?

[sdimchevski]

@kdinev @simeonoff As far as I know labels are meant for single inputs, not a group. Using it for the entire radio group may confuse screen readers or assistive tech, which expect a 1-to-1 label-to-input relationship. They may not announce the group label properly, or may misassociate it with just the first radio button. This can cause confusion for users relying on screen readers.

For describing a set of options (like SC2 race), it’s better UX and more semantically correct to use a title, heading, or caption (e.g., a <span>, <p>, or <h6>) placed above the radio group — this clearly communicates the intent without interfering with accessibility or control bindings.