Skip to content

[radio][checkbox][switch] Reduce bundle size#5223

Merged
atomiks merged 4 commits into
mui:masterfrom
atomiks:claude/base-ui-radio-checkbox-switch-12876d
Jul 13, 2026
Merged

[radio][checkbox][switch] Reduce bundle size#5223
atomiks merged 4 commits into
mui:masterfrom
atomiks:claude/base-ui-radio-checkbox-switch-12876d

Conversation

@atomiks

@atomiks atomiks commented Jul 13, 2026

Copy link
Copy Markdown
Contributor

Reduces the Radio, Checkbox, and Switch bundle size without changing behavior or the public API. The bundle bot is authoritative for the current size impact.

Runtime-read data-* enum members are inlined so the enums tree-shake out, including the component root mappings and shared validity and transition mappings. Local cleanup and enum-sync tests pin every inlined string to its source enum.

@atomiks atomiks added type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: all components Widespread work has an impact on almost all components. labels Jul 13, 2026
@pkg-pr-new

pkg-pr-new Bot commented Jul 13, 2026

Copy link
Copy Markdown

commit: 617bad3

@code-infra-dashboard

code-infra-dashboard Bot commented Jul 13, 2026

Copy link
Copy Markdown

Bundle size

Bundle Parsed size Gzip size
@base-ui/react ▼-1.35KB(-0.30%) ▼-434B(-0.30%)

Details of bundle changes

Performance

Total duration: 1,361.35 ms +83.02 ms(+6.5%) | Renders: 78 (+0) | Paint: 2,132.01 ms +153.06 ms(+7.7%)

Test Duration Renders
Select mount (200 instances) 179.28 ms 🔺+30.65 ms(+20.6%) 3 (+0)
Select open (500 options) 50.95 ms 🔺+9.26 ms(+22.2%) 14 (+0)

12 tests within noise — details

Metric alarms

Test Metric Change
Select open (500 options) bench:paint 🔺 +21.83 ms
Select open (500 options) bench:paint#select-open 🔺 +21.83 ms

Check out the code infra dashboard for more information about this PR.

@netlify

netlify Bot commented Jul 13, 2026

Copy link
Copy Markdown

Deploy Preview for base-ui ready!

Name Link
🔨 Latest commit 617bad3
🔍 Latest deploy log https://app.netlify.com/projects/base-ui/deploys/6a54f5264cb12d0008da2dac
😎 Deploy Preview https://deploy-preview-5223--base-ui.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@atomiks atomiks added performance component: checkbox Changes related to the checkbox component. component: checkbox group Changes related to the checkbox group component. and removed type: enhancement It’s an improvement, but we can’t make up our mind whether it's a bug fix or a new feature. scope: all components Widespread work has an impact on almost all components. labels Jul 13, 2026
@atomiks atomiks changed the title [all components] Reduce bundle size of Radio, Checkbox, and Switch [radio][checkbox][switch] Reduce bundle size Jul 13, 2026
@atomiks atomiks added component: radio group Changes related to the radio group component. component: switch Changes related to the switch component. labels Jul 13, 2026
@atomiks
atomiks marked this pull request as ready for review July 13, 2026 10:02
@atomiks
atomiks requested a review from Copilot July 13, 2026 12:50

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

Pull request overview

This PR performs a bundle-size reduction pass across Switch, Radio, Checkbox, and shared internals by replacing runtime enum-member lookups for data-* attributes with inlined string literals, and adds “enum sync” tests to keep the literals and enums aligned without reintroducing runtime references.

Changes:

  • Inline frequently-read data-* attribute keys (e.g. data-checked, data-invalid, transition status hooks) so related enums can tree-shake out of consumer bundles.
  • Refactor Checkbox state-attribute mapping from a hook to a pure helper, and simplify a few context/default-value patterns.
  • Add targeted tests to pin inlined literals to their corresponding enums and to cover a few subtle ARIA/form/StrictMode invariants.

Reviewed changes

Copilot reviewed 22 out of 22 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/react/src/switch/stateAttributesMapping.ts Inline data-checked / data-unchecked keys in the Switch state mapping.
packages/react/src/switch/root/SwitchRoot.tsx Remove mergeProps usage for hidden input props and simplify effect deps; keep validation props applied.
packages/react/src/switch/root/SwitchRoot.test.tsx Add a browser-only regression test to ensure validation/ARIA props survive canceled changes + submit/reset.
packages/react/src/switch/enumSync.test.ts New test linking inlined Switch data-* literals back to SwitchRootDataAttributes.
packages/react/src/radio/utils/stateAttributesMapping.ts Inline data-checked / data-unchecked in Radio state mapping.
packages/react/src/radio/root/RadioRoot.tsx Simplify defaulting of group-context callbacks via destructuring defaults.
packages/react/src/radio/enumSync.test.ts New test linking inlined Radio data-* literals back to RadioRootDataAttributes.
packages/react/src/radio-group/RadioGroup.tsx Simplify aria-labelledby fallback computation and trim redundant context value fields.
packages/react/src/radio-group/RadioGroup.test.tsx Add regression coverage for aria-labelledby precedence updates as labels/legends mount/unmount/replace.
packages/react/src/internals/useAnimationsFinished.ts Inline transition “starting style” attribute key to avoid enum runtime reference.
packages/react/src/internals/stateAttributesMapping.ts Inline transition hook attribute keys so TransitionStatusDataAttributes can tree-shake.
packages/react/src/internals/stateAttributesMapping.test.ts New tests syncing inlined transition + validity mapping literals to their enums.
packages/react/src/internals/field-constants/constants.ts Inline data-valid / data-invalid in shared field validity mapping.
packages/react/src/checkbox/utils/useStateAttributesMapping.ts Remove hook-based mapping helper (no longer needed).
packages/react/src/checkbox/utils/getCheckboxStateAttributesMapping.ts New pure helper returning Checkbox state-attribute mapping with inlined data-* keys.
packages/react/src/checkbox/root/CheckboxRoot.tsx Switch to new mapping helper and apply minor cleanup (e.g. Symbol() init).
packages/react/src/checkbox/indicator/CheckboxIndicator.tsx Reuse the new mapping helper and remove redundant validity mapping spread.
packages/react/src/checkbox/enumSync.test.ts New test linking inlined Checkbox data-* literals back to CheckboxRootDataAttributes.
packages/react/src/checkbox-group/useCheckboxGroupParent.ts Use shared EMPTY_ARRAY, simplify filter logic, and remove redundant returned indeterminate field.
packages/react/src/checkbox-group/CheckboxGroupContext.ts Simplify useCheckboxGroupContext to a direct context read (internal helper).
packages/react/src/checkbox-group/CheckboxGroup.tsx Simplify uncontrolled defaultValue computation and reuse EMPTY_ARRAY.
packages/react/src/checkbox-group/CheckboxGroup.test.tsx Add StrictMode regression test ensuring omitted defaults don’t leak between groups.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

@atomiks
atomiks force-pushed the claude/base-ui-radio-checkbox-switch-12876d branch from d53520c to 617bad3 Compare July 13, 2026 14:24
@atomiks
atomiks merged commit 451c9c2 into mui:master Jul 13, 2026
24 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

component: checkbox group Changes related to the checkbox group component. component: checkbox Changes related to the checkbox component. component: radio group Changes related to the radio group component. component: switch Changes related to the switch component. performance

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants