Can't disable specific `radio buttons`/`checkboxes` inside `radio` and `checkbox` options

[radmorecameron]

With v0.35.0 it seems that we can disable whole groups of radio buttons and checkboxes easily but we can no longer disable specific radio buttons/checkboxes within that group.

I didn't see a mention of this in the changelog so I wanted to clarify if this change was intentional.

Before v0.35.0 (disabled and required can be set on each individual option):

export type RadioObject = {
  id: string;
  label: string;
  value: string;
  hint?: string;
  checked?: boolean;
  required?: boolean;
  disabled?: boolean;
};

With v0.35.0 (can't set required or disabled on each individual option):

export type RadioObject = {
  id: string;
  label: string;
  value: string;
  hint?: string;
  checked?: boolean;
};

Thanks, Cameron Radmore

[daine]

Hi @radmorecameron! You're correct, this was an intentional decision. Our principle is to avoid mixing disabled/enabled options because other techniques (like filtering the list) are often clearer and less frustrating for users.

However, principles can be updated with new evidence. If you have a specific scenario that you feel makes a strong argument for this pattern, please share the details. We'd be happy to take it to the team and reconsider our approach.

[theonlyguills]

Just an example of a screen the user can see multiple times (adding more events to a trip) and our UX decided hiding items the user is expecting to see was a bad choice and simply disabling items that aren't allowed at this point in time but will be in the future would make it clearer. I'm not sure if removing design options from UX at the framework level is the best way to go about this.

[radmorecameron]

As a follow up: on my end, filtering can be done I just wasn't sure if the change was intentional since it was missing from the release notes.

The only problem I see with filtering is that there is a minimum of 2 radio buttons required (which doesn't seem to be documented outside of code). I guess for this case, we should switch to a gcds-checkboxes whenever there's only 1 option and use gcds-radios when there are more than 1?

https://github.com/cds-snc/gcds-components/blob/04c2a8b46e79e4dd7478d2d3501dfe39c1e8b321/packages/web/src/components/gcds-radios/gcds-radios.tsx#L83

[adorayi]

This was an intentional change. Need Design to weigh in on this use case @SmartMouthWords

[daine]

@radmorecameron @theonlyguills Thank you for pointing this out — and we’re sorry it wasn't included in the release notes. That was an oversight on our part, and we understand how frustrating that can be when you rely on accurate documentation.

To clarify: the gcds-radios component is intentionally designed to require at least two options, while the gcds-checkboxes component supports a single item. This is because a single checkbox is appropriate for cases like agreeing to terms, whereas radio buttons are meant to present a meaningful choice among multiple options. With only one option, a checkbox is the more accessible and semantically correct choice.

As a design system, we strive for consistent experiences across assistive technologies. Since some screen readers (i.e. VoiceOver) consistently skip disabled radio buttons during group navigation when there is a mix of enabled and disabled options, we've chosen not to support disabling individual radio options at this time. However, you can still disable the entire radio group (radios) as needed.

That said, we're open to exploring ways to reintroduce support for individual disabled options while maintaining accessibility standards. While we may not be able to prioritize this immediately, we'll keep it in mind for future improvements, so we'll keep this issue open for now. If you have additional examples or use cases, feel free to share them in a comment at any time.

We really appreciate you raising this and are happy to discuss further if needed.