Skip to content

RadioControl: add disabled styles #77127

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
oandregal wants to merge 3 commits into
base: trunk
Choose a base branch
from
Open

RadioControl: add disabled styles #77127

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3d23e9f
Add disabled styles (and storybook control) for radiocontrol
oandregal Apr 8, 2026
b9b22f1
Remove git conflicts markers from changelog
oandregal Apr 8, 2026
c44ff56
Add changelog entry
oandregal Apr 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions packages/components/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,14 @@

### Bug Fixes

<<<<<<< fix/rtc-inline-inserter
- `RadioControl`: Add disabled styles. [#77127](https://github.com/WordPress/gutenberg/pull/77127)
- `Autocomplete`: Fix value comparison to avoid resetting block inserter in RTC ([#76980](https://github.com/WordPress/gutenberg/pull/76980)).
=======
Copy link
Copy Markdown
Member Author

@oandregal oandregal Apr 8, 2026

Choose a reason for hiding this comment

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

I've noticed these git conflict marks and removed them at b9b22f1

I am not sure if the changelog needs to be tweaked?

Copy link
Copy Markdown
Member Author

@oandregal oandregal Apr 8, 2026

Choose a reason for hiding this comment

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

It's enough to remove the markers, they were introduced at https://github.com/WordPress/gutenberg/pull/76980/changes#r3050030572

- `ValidatedRangeControl`: Fix `aria-label` rendered as `[object Object]` when `required` or `markWhenOptional` is set ([#77042](https://github.com/WordPress/gutenberg/pull/77042)).
- `Autocomplete`: Fix matching logic to prefer longest overlapping trigger ([#77018](https://github.com/WordPress/gutenberg/pull/77018)).

### Internal

- Autocomplete: Refactor `useAutocomplete` to use `useReducer` ([#77020](https://github.com/WordPress/gutenberg/pull/77020)).
>>>>>>> trunk

## 32.5.0 (2026-04-01)

Expand Down
6 changes: 5 additions & 1 deletion packages/components/src/radio-control/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export function RadioControl(
onChange,
onClick,
hideLabelFromVision,
disabled,
options = [],
id: preferredId,
...additionalProps
Expand All @@ -88,7 +89,10 @@ export function RadioControl(
<fieldset
id={ id }
role="radiogroup"
className={ clsx( className, 'components-radio-control' ) }
className={ clsx( className, 'components-radio-control', {
'is-disabled': disabled,
} ) }
disabled={ disabled }
aria-describedby={ !! help ? generateHelpId( id ) : undefined }
>
{ hideLabelFromVision ? (
Expand Down
3 changes: 3 additions & 0 deletions packages/components/src/radio-control/stories/index.story.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,9 @@ const meta: Meta< typeof RadioControl > = {
help: {
control: { type: 'text' },
},
disabled: {
control: { type: 'boolean' },
},
},
parameters: {
controls: {
Expand Down
16 changes: 14 additions & 2 deletions packages/components/src/radio-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@

font-family: $default-font;
font-size: $default-font-size;

}

.components-radio-control__group-wrapper.has-help {
Expand All @@ -34,7 +35,16 @@
margin: 0;
padding: 0;
appearance: none;
cursor: pointer;

&:not(:disabled) {
cursor: pointer;
}

&:disabled {
background: $gray-100;
border-color: $gray-300;
opacity: 1;
}
Comment on lines +39 to +47
Copy link

Copilot AI Apr 8, 2026

Choose a reason for hiding this comment

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

&:disabled is declared before &:checked, so a disabled-but-selected radio will still pick up the checked (accent) styling. This doesn’t match the CheckboxControl disabled pattern (where :disabled overrides checked styles) and makes the disabled state inconsistent across options. Consider making the disabled styles override checked styles (e.g., target :disabled and :disabled:checked, and ensure the border/background are set explicitly even if checked removes the border).

Copilot uses AI. Check for mistakes.

&:focus {
@include button-style-outset__focus(var(--wp-admin-theme-color));
Expand All @@ -55,7 +65,9 @@
grid-column: 2;
grid-row: 1;

cursor: pointer;
.components-radio-control:not(.is-disabled) & {
cursor: pointer;
}
line-height: $radio-input-size-sm;

@include break-small() {
Expand Down
6 changes: 6 additions & 0 deletions packages/components/src/radio-control/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,12 @@ export type RadioControlProps = Pick<
BaseControlProps,
'label' | 'help' | 'hideLabelFromVision'
> & {
/**
* Whether the radio inputs should be disabled.
*
* @default false
*/
disabled?: boolean;
/**
* A function that receives the value of the new option that is being
* selected as input.
Expand Down
Loading