Describe the bug

Using display: block on radio button <label> elements makes them fill the width of their container, and it also makes the label's white space clickable.

Steps to reproduce the bug

1. On a desktop-sized device, go to https://designsystem.digital.gov/components/radio-buttons/
2. In any example, use a pointer to click in the white space next to any radio button label
3. Note how doing so selects the adjacent radio

Expected Behavior

Only the input (or input proxy) and associated label are clickable. Clicking the white space next to a label does nothing.

Related code

.usa-radio__label {
    cursor: pointer;
    display: inherit;
    font-weight: 400;
    margin-top: .75rem;
    padding-left: 2rem;
    position: relative;
}

Suggestion: Changing display: inherit (which computes to block) to display: inline-block retains the ability to set vertical margin, but instead of filling the container the label's width will match content width.

Screenshots

The following screenshot shows a label with a background color to show its full footprint. You can click anywhere in the colored area to select the associated radio.

System setup

• USWDS version: v3.9.0 (latest)
• MacBook Pro
• Mac OS 14.6.1
• Chrome latest

Additional context

No response

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate bug reports.