A disabled radio button is not grayed out

[ArturGudiev]

Describe the bug

When a radio button is in the middle, it can be not grayed out when it is disabled.

How to reproduce

Please provide a link to a reproduction scenario using one of the Clarity Stackblitz templates. Reports without a clear reproduction may not be prioritized until one is provided.

Steps to reproduce the behavior:

1. Create a new clarity project
2. in AppComponent create option = 'option1'; field
3. in app.component.html add the following code

<clr-radio-container clrInline>
  <label>Inline radio example</label>
  <clr-radio-wrapper>
    <input [disabled]="true" type="radio" clrRadio name="options" required value="option1" [(ngModel)]="option" />
    <label>Option 1</label>
  </clr-radio-wrapper>
  <clr-radio-wrapper>
    <input  [disabled]="true" type="radio" clrRadio name="options" required value="option2" [(ngModel)]="option" />
    <label>Option 2</label>
  </clr-radio-wrapper>
  <clr-radio-wrapper>
    <input [disabled]="true" type="radio" clrRadio name="options" required value="option3" [(ngModel)]="option" />
    <label>Option 3</label>
  </clr-radio-wrapper>
</clr-radio-container>

4. All three radio buttons are disabled and grayed out.
5. Set [disabled]=false for the 1-st and 3-rd buttons ( leave 2-nd as it is)

Expected behavior

The first and the third buttons are enabled. The second one is disabled and grayed out.

Actual behavior

The second one is disabled but not grayed out.

Versions

5.0.0 and latest 4.*

[Jinnie]

Please provide a stackblitz reproduction

[Jinnie]

But looking at the description, you're trying to disable individual radio options. This does not work. Not only in Clarity, but it's not supported by Angular. As documented in the Clarity website:

A radio can be disabled by simply putting the disabled attribute on the radio input. This does require the radio to be inside of a radio container. Also, for groups of radios you have to put the disabled attribute on the last radio and cannot disable individual ones, as Angular doesn't have support to disable individual radios in a group.

https://v4.clarity.design/documentation/radio

[github-actions[bot]]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.