RadioButton: component looks bugged with 2 circles one above the other

[codrut1]

Describe the bug

As you can see, the issue is that the button doesn't look right, the circles are one below the other. I am using an Angular 17 app using standalone components by default.

I cannot reproduce the issue on Stackblitz so I am going to try to explain it here.

In a component, I am importing the RadioButtonModule in the imports array
import { RadioButtonModule } from 'primeng/radiobutton';

In the HTML file, I use it like this:

<div class="flex align-items-center">
    <p-radioButton
      value="vela"
      (onClick)="changeTheme($event)"
      inputId="velaRadio"
    ></p-radioButton>
    <label for="velaRadio">Dark</label>
  </div>

My app.config.ts looks like this:

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideAnimations(),
  ],
};

This is the error I get, I suppose it is related to the issue (there is one message per p-radioButton used)

Environment

Windows 11, VSCode, Google Chrome

Reproducer

https://codesandbox.io/p/devbox/lively-dream-3rymgn?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clq3heprl0006356j0gl9ive7%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clq3heprl0002356j5wt3nd7u%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clq3heprl0004356jmetxkqdo%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clq3heprl0005356juhab8oil%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B60%252C40%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clq3heprl0002356j5wt3nd7u%2522%253A%257B%2522id%2522%253A%2522clq3heprl0002356j5wt3nd7u%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clq3heprl0005356juhab8oil%2522%253A%257B%2522id%2522%253A%2522clq3heprl0005356juhab8oil%2522%252C%2522activeTabId%2522%253A%2522clq3hnao700qv356jnc1y8xog%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A4200%252C%2522id%2522%253A%2522clq3hnao700qv356jnc1y8xog%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clq3heprl0004356jmetxkqdo%2522%253A%257B%2522id%2522%253A%2522clq3heprl0004356jmetxkqdo%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clq3heprl0003356jw95x9jcc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%257D%252C%257B%2522id%2522%253A%2522clq3hgud700ci356jxqhcc7sb%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clq3hgudz01pvefg6051nau7b%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clq3hgud700ci356jxqhcc7sb%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Angular version

17.0.0

PrimeNG version

17.0.0

Build / Runtime

Angular CLI App

Language

TypeScript

Node version (for AoT issues node --version)

18.16.0

Browser(s)

No response

Steps to reproduce the behavior

1. Create an angular 17 app with standalone components as default ( when creating an app with Angular CLI, select the option when prompted)
2. Try to use the radio button in any component. This should be enough to see the issue

Expected behavior

I would expect the button to look like this:

[cetincakiroglu]

Hi,

Could you please share a stackblitz reproducer so we can identify the issue clearly?

[github-actions]

We're unable to replicate your issue, if you are able to create a reproducer by using PrimeNG Issue Template or add details please edit this issue. This issue will be closed if no activities in 20 days.

[codrut1]

Hello, I have tried to reproduce the environment on Stackblitz but I cannot reproduce creating a new Angular 17 app with standalone components by default, which I believe might be related to the issue, but I have managed to reproduce it locally with just a few steps:

1. Create a new Angular application with ng new
2. Install primeng with npm i primeng.
3. Add a stylesheet in angular.json and inside app.config.ts add the following:

import { provideAnimations } from '@angular/platform-browser/animations';
...
export const appConfig: ApplicationConfig = {
  providers: [provideRouter(routes), provideAnimations()],
};

4. In app.component.ts:

import { RadioButtonModule } from 'primeng/radiobutton';
...
@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, RouterOutlet, RadioButtonModule],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})

5. In app.component.html:
   <p-radioButton></p-radioButton>

Result:

If you cannot reproduce I will keep trying on Stackblitz but I believe the most important thing to reproduce it is to have a fresh Angular 17 app that uses Standalone Components by default. Also, the docs are not updated with the setup for this new structure of an app (angular.config.ts instead of app.module) so maybe I am forgetting something but it would be helpful to see it in the docs. Thanks!

[codrut1]

Managed to replicate it on Codesandbox:

https://codesandbox.io/p/devbox/lively-dream-3rymgn?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522clq3heprl0006356j0gl9ive7%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522clq3heprl0002356j5wt3nd7u%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522clq3heprl0004356jmetxkqdo%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522clq3heprl0005356juhab8oil%2522%257D%255D%252C%2522sizes%2522%253A%255B100%255D%257D%255D%252C%2522sizes%2522%253A%255B60%252C40%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522clq3heprl0002356j5wt3nd7u%2522%253A%257B%2522id%2522%253A%2522clq3heprl0002356j5wt3nd7u%2522%252C%2522tabs%2522%253A%255B%255D%257D%252C%2522clq3heprl0005356juhab8oil%2522%253A%257B%2522id%2522%253A%2522clq3heprl0005356juhab8oil%2522%252C%2522activeTabId%2522%253A%2522clq3hnao700qv356jnc1y8xog%2522%252C%2522tabs%2522%253A%255B%257B%2522type%2522%253A%2522UNASSIGNED_PORT%2522%252C%2522port%2522%253A4200%252C%2522id%2522%253A%2522clq3hnao700qv356jnc1y8xog%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522path%2522%253A%2522%252F%2522%257D%255D%257D%252C%2522clq3heprl0004356jmetxkqdo%2522%253A%257B%2522id%2522%253A%2522clq3heprl0004356jmetxkqdo%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522clq3heprl0003356jw95x9jcc%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522start%2522%257D%252C%257B%2522id%2522%253A%2522clq3hgud700ci356jxqhcc7sb%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TERMINAL%2522%252C%2522shellId%2522%253A%2522clq3hgudz01pvefg6051nau7b%2522%257D%255D%252C%2522activeTabId%2522%253A%2522clq3hgud700ci356jxqhcc7sb%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

[siddhareddy]

Add the missing "node_modules/primeng/resources/primeng.min.css" into your angular.json as per the setup guide. primeng.org/installation and rebuild the project

[codrut1]

This fixed it, thanks