Disabled radio toggle button groups lose checked state

Open Beginner friendly
  • Is something wrong?
#43,348 0 comments 0 reactions 0 assignees View on GitHub

Maintainers usually reply within 1 day

@vladosskins178 is already working on this.

Since Nov 11, 2026.

  • #43350 by @vladosskins178 — open

Assessment

Difficulty
2/5
Estimated time
1-3 hours
Newbie friendliness
72/100
Issue type
Bug
Clarity
Clearly specified
Activity status
Active
Tech stack
bootstrap, css, html, scss
Domain
accessibility, frontend

Research direction

Start by reproducing the issue with the provided radio group in Bootstrap v6.0.0.alpha.1, then inspect the button group and form-check styles that control checked and disabled radio states. Verify the expected behavior in Chrome: the checked option should remain visually distinguishable when every radio is disabled.

Written by the indexing model from the issue text.

Description

bug confirmed css has-pr v6
Prerequisites
Describe the issue

When all radio buttons in a radio group are disabled, the selected button (with the checked attribute) loses its checked state. As a result, all buttons appear visually identical, making it impossible to distinguish the selected option from the others.

<div class="btn-group" role="group">
  <label class="btn-check btn-outline theme-secondary">
    <input type="radio" name="platform" value="wechat" autocomplete="off" tabindex="-1" disabled checked>
    <i class="bi bi-wechat"></i>
  </label>
  <label class="btn-check btn-outline theme-secondary">
    <input type="radio" name="platform" value="alipay" autocomplete="off" tabindex="-1" disabled>
    <i class="bi bi-alipay"></i>
  </label>
</div>
Reduced test cases

A minimal reproduction can be created using a radio button group where all radio buttons have the disabled attribute and one of them has the checked attribute.

The expected behavior is that the checked state should remain visually distinguishable even when all radio buttons are disabled.

What operating system(s) are you seeing the problem on?

Windows

What browser(s) are you seeing the problem on?

Chrome

What version of Bootstrap are you using?

v6.0.0.alpha.1

Dominant language
MDX
Stars
175k
Forks
78.7k
Avg merge
1d 5h
Merged PRs (30d)
94

Getting set up

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from twbs/bootstrap

All issues in twbs/bootstrap

Similar issues

More Accessibility issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.