Skip to content

Keep the checked look on disabled toggle buttons - #43350

Open
vladosskins178 wants to merge 1 commit into
twbs:mainfrom
vladosskins178:fix/btn-check-disabled-checked
Open

vladosskins178 wants to merge 1 commit into
twbs:mainfrom
vladosskins178:fix/btn-check-disabled-checked

Conversation

@vladosskins178

Copy link
Copy Markdown
  • A disabled .btn-check took the disabled colors even when its input was checked. The disabled rule came after the checked rule with the same specificity, so it won. In a group of disabled radios, no option looked selected.
  • .btn-check:has(input:disabled) now keeps only pointer-events, opacity and box-shadow. The disabled colors move to .btn-check:has(input:disabled):not(:has(input:checked)).
  • A disabled checked toggle now shows its checked colors at the disabled opacity. This matches v5, where .btn-check:disabled + .btn changed only the opacity. Unchecked disabled toggles do not change.

Computed styles in Chromium, built from main and from this branch (radio group from the issue, .btn-outline.theme-secondary):

Toggle main This branch
Disabled, checked background transparent, opacity 0.65 background oklch(0.828 0.005 245), opacity 0.65 (same as enabled checked)
Disabled, not checked background transparent, opacity 0.65 unchanged

npm run css-lint and npm run css-test pass.

Fixes #43348

A disabled .btn-check took the disabled colors even when its input was checked.
The rule came after the checked rule with the same specificity, so it won.
A group of disabled radios then showed no selected option.

The disabled rule now keeps pointer-events, opacity and box-shadow for every
disabled toggle. It applies the disabled colors only when the input is not checked.
@vladosskins178
vladosskins178 requested a review from a team as a code owner November 11, 2026 10:06
@julien-deramond julien-deramond added v6 v6, the main branch bug Something does not work as documented css Sass sources or compiled CSS labels Nov 11, 2026

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something does not work as documented css Sass sources or compiled CSS v6 v6, the main branch

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Disabled radio toggle button groups lose checked state

2 participants