Skip to content

RadioControl: allow individual options to be disabled - #82026

Merged
ciampo merged 3 commits into
trunkfrom
codex/radio-control-disabled-options
Aug 25, 2026
Merged

RadioControl: allow individual options to be disabled#82026
ciampo merged 3 commits into
trunkfrom
codex/radio-control-disabled-options

Conversation

@ciampo

@ciampo ciampo commented Aug 25, 2026 •
edited
Loading

Copy link
Copy Markdown
Contributor

Closes #81939

What?

Adds an optional disabled field to individual RadioControl options. Unavailable choices can remain visible without disabling the whole radio group.

Why?

Consumers currently have to hide the option, disable every choice, or recreate RadioControl markup and depend on its internal class names.

How?

The option's disabled value is passed to its native radio input. This reuses the existing disabled indicator styles while keeping the label at its normal color and opacity, as shown in the design feedback.

Testing Instructions

  1. Run npm run storybook:dev.
  2. Open Components > Selection & Input > Common > RadioControl > With Disabled Option.
  3. Confirm that Private has a disabled gray radio indicator, while its label keeps the same text color and opacity as the other labels.
  4. Confirm that clicking Private does not select it.
  5. Confirm that Public and Password Protected remain selectable.

Testing Instructions for Keyboard

  1. Press Tab until focus enters the radio group.
  2. Use the arrow keys to move through the available options.
  3. Confirm that the disabled Private option is not selected and the enabled options remain reachable.

Screenshots

All options disabled (same as on trunk)

Screenshot 2026-08-25 at 14 51 22

One option disabled, unselected

Screenshot 2026-08-25 at 14 51 17

One option disabled, selected

Screenshot 2026-08-25 at 14 51 07

Use of AI Tools

Codex was used to implement the change, run verification, and draft this description.

@github-actions github-actions Bot added the [Package] Components /packages/components label Aug 25, 2026
@github-actions

github-actions Bot commented Aug 25, 2026 •
edited
Loading

Copy link
Copy Markdown

Size Change: -398 B (-0.01%)

Total Size: 7.91 MB

📦 View Changed
Filename Size Change
build/scripts/block-library/index.min.js 369 kB -20 B (-0.01%)
build/scripts/components/index.min.js 265 kB +4 B (0%)
build/styles/block-library/query-no-results/style-rtl.css 0 B -84 B (removed) 🏆
build/styles/block-library/query-no-results/style-rtl.min.css 0 B -77 B (removed) 🏆
build/styles/block-library/query-no-results/style.css 0 B -84 B (removed) 🏆
build/styles/block-library/query-no-results/style.min.css 0 B -77 B (removed) 🏆
build/styles/block-library/style-rtl.css 22.5 kB -13 B (-0.06%)
build/styles/block-library/style-rtl.min.css 19 kB -19 B (-0.1%)
build/styles/block-library/style.css 22.6 kB -12 B (-0.05%)
build/styles/block-library/style.min.css 18.9 kB -20 B (-0.11%)
build/styles/components/style-rtl.css 16.4 kB +1 B (+0.01%)
build/styles/components/style-rtl.min.css 13.8 kB +1 B (+0.01%)
build/styles/components/style.css 16.5 kB +1 B (+0.01%)
build/styles/components/style.min.css 13.8 kB +1 B (+0.01%)

compressed-size-action

@ciampo ciampo self-assigned this Aug 25, 2026
@ciampo ciampo added the [Type] Enhancement A suggestion for improvement. label Aug 25, 2026
@ciampo
ciampo marked this pull request as ready for review August 25, 2026 12:52
@ciampo
ciampo requested review from a team and ajitbohra as code owners August 25, 2026 12:52
@github-actions

github-actions Bot commented Aug 25, 2026 •
edited
Loading

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: aduth <aduth@git.wordpress.org>
Co-authored-by: Kallyan01 <kallyansin@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: allilevine <firewatch@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@ciampo ciampo mentioned this pull request Aug 25, 2026
Closed
@github-actions

github-actions Bot commented Aug 25, 2026 •
edited
Loading

Copy link
Copy Markdown

Flaky tests detected in 35f19ec.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/32863047742
📝 Reported tests:

Should insert content using the global inserter in /test/e2e/specs/widgets/editing-widgets.spec.js, passed after 1 failed attempt.

aduth
aduth approved these changes Aug 25, 2026
View reviewed changes

@aduth aduth left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 👍

Comment thread packages/components/src/radio-control/style.scss Outdated
Comment on lines +79 to +83
.components-radio-control__input:not(:disabled) {
& + .components-radio-control__label {
cursor: var(--wpds-cursor-control);
}
}

@aduth aduth Aug 25, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we bother nesting this?

Suggested change
.components-radio-control__input:not(:disabled) {
& + .components-radio-control__label {
cursor: var(--wpds-cursor-control);
}
}
.components-radio-control__input:not(:disabled) + .components-radio-control__label {
cursor: var(--wpds-cursor-control);
}

@aduth aduth Aug 25, 2026

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Alternatively, it likely could have been left where it was and replaced .components-radio-control:not(:disabled) with .components-radio-control__input:not(:disabled) + ?

@ciampo ciampo Aug 25, 2026

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like the last suggestion, I'll apply it and merge 🚀

@ciampo
ciampo force-pushed the codex/radio-control-disabled-options branch from b22788a to 35f19ec Compare August 25, 2026 15:00
@ciampo
ciampo enabled auto-merge (squash) August 25, 2026 15:01
@ciampo
ciampo merged commit 8d68310 into trunk Aug 25, 2026
60 checks passed
@ciampo
ciampo deleted the codex/radio-control-disabled-options branch August 25, 2026 15:39
@github-actions github-actions Bot added this to the Gutenberg 23.9 milestone Aug 25, 2026
@simison simison mentioned this pull request Aug 27, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@aduth aduth aduth approved these changes
@ajitbohra ajitbohra Awaiting requested review from ajitbohra

Assignees

@ciampo ciampo

Labels

[Package] Components /packages/components [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 23.9

Development

Successfully merging this pull request may close these issues.

RadioControl: allow individual options to be disabled

2 participants

@ciampo @aduth