Skip to content

feat(react-checkbox): add useCheckboxBase_unstable hook#35826

Merged
dmytrokirpa merged 7 commits into
masterfrom
feat/react-checkbox-base-hooks
Apr 1, 2026
Merged

feat(react-checkbox): add useCheckboxBase_unstable hook#35826
dmytrokirpa merged 7 commits into
masterfrom
feat/react-checkbox-base-hooks

Conversation

@dmytrokirpa

@dmytrokirpa dmytrokirpa commented Mar 3, 2026

Copy link
Copy Markdown
Contributor

Summary

This PR adds a base state hook for the Checkbox component as part of the experimental base hooks initiative.

What was implemented

  • useCheckboxBase_unstable — base hook for Checkbox component
    • Props type: CheckboxBaseProps (omits shape, size)
    • State type: CheckboxBaseState (omits shape, size)
    • Handles:
      • Controlled/uncontrolled checked state (useControllableState) supporting tri-state (true, false, 'mixed')
      • onChange callback with correct { checked: val } data
      • Native props partitioning (getPartitionedNativeProps)
      • Focus management via useFocusWithin
      • Input ref management (useMergedRefs) for setting indeterminate prop
      • indeterminate layout effect (useIsomorphicLayoutEffect)
      • ARIA attributes on input (type, checked, id)
      • Label slot with htmlFor, disabled, required props
      • Default checkmark icon (uses medium/square defaults)
      • Slot structure (root, input, indicator, label)

Note on icon selection

The base hook uses medium-size square/checkmark icons by default. useCheckbox_unstable overrides the indicator children with the appropriate size+shape-specific icon based on the size and shape design props.

Exports

All new types and hooks are exported from the package index.ts. They are NOT exported from @fluentui/react-components.

🤖 Generated with Claude Code

dmytrokirpa and others added 2 commits March 5, 2026 12:11
Implements base state hook for Checkbox component as part of the experimental base hooks initiative.
The base hook extracts pure component logic while omitting design props (shape, size).

- CheckboxBaseProps: omits shape, size
- CheckboxBaseState: omits shape, size
- useCheckboxBase_unstable: handles checked/indeterminate state (controlled/uncontrolled),
  onChange callback, ARIA attributes, focus management (useFocusWithin), input ref management,
  indeterminate layout effect, label slot with htmlFor, slot structure

useCheckbox_unstable now calls useCheckboxBase_unstable and adds shape+size-specific checkmark icons.
All new types and hooks exported from package index.ts.

Co-Authored-By: Claude Sonnet 4.6 <[email protected]>
@dmytrokirpa dmytrokirpa changed the base branch from experimental/component-base-hooks to master March 5, 2026 11:12
@dmytrokirpa dmytrokirpa force-pushed the feat/react-checkbox-base-hooks branch from 350df88 to e1eb221 Compare March 5, 2026 11:12
@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown

Pull request demo site: URL

@github-actions

github-actions Bot commented Mar 5, 2026

Copy link
Copy Markdown

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-checkbox
Checkbox
33.458 kB
11.375 kB
33.7 kB
11.421 kB
242 B
46 B
react-components
react-components: entire library
1.297 MB
324.234 kB
1.297 MB
324.288 kB
249 B
54 B
react-list
ListItem
110.775 kB
32.629 kB
111.018 kB
32.682 kB
243 B
53 B
react-table
DataGrid
159.531 kB
44.975 kB
159.783 kB
45.012 kB
252 B
37 B
react-table
Table as DataGrid
130.752 kB
35.992 kB
131.005 kB
36.012 kB
253 B
20 B
react-table
Table (Selection only)
69.139 kB
19.357 kB
69.391 kB
19.404 kB
252 B
47 B
react-table
Table (Sort only)
67.782 kB
18.973 kB
68.034 kB
19.022 kB
252 B
49 B
react-tree
FlatTree
147.853 kB
42.169 kB
148.099 kB
42.211 kB
246 B
42 B
react-tree
PersonaFlatTree
149.681 kB
42.544 kB
149.927 kB
42.585 kB
246 B
41 B
react-tree
PersonaTree
145.741 kB
41.373 kB
145.987 kB
41.411 kB
246 B
38 B
react-tree
Tree
143.919 kB
41.004 kB
144.165 kB
41.037 kB
246 B
33 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-components
react-components: Button, FluentProvider & webLightTheme
70.397 kB
19.96 kB
react-components
react-components: Accordion, Button, FluentProvider, Image, Menu, Popover
236.743 kB
68.75 kB
react-components
react-components: FluentProvider & webLightTheme
43.612 kB
14.022 kB
react-list
List
87.11 kB
25.762 kB
react-portal-compat
PortalCompatProvider
8.386 kB
2.624 kB
react-table
Table (Primitives only)
40.997 kB
13.172 kB
react-timepicker-compat
TimePicker
108.174 kB
35.695 kB
🤖 This report was generated against d3c3e333db020cc530bcdd79d21114730bcb07d0

@dmytrokirpa dmytrokirpa force-pushed the feat/react-checkbox-base-hooks branch from 91e69c5 to 57b8f68 Compare March 14, 2026 12:25
@dmytrokirpa dmytrokirpa marked this pull request as ready for review March 14, 2026 17:09
@dmytrokirpa dmytrokirpa requested review from a team and mainframev as code owners March 14, 2026 17:09
@dmytrokirpa dmytrokirpa merged commit b5fd7a7 into master Apr 1, 2026
15 checks passed
tudorpopams pushed a commit to tudorpopams/fluentui that referenced this pull request Apr 14, 2026
@dmytrokirpa dmytrokirpa deleted the feat/react-checkbox-base-hooks branch May 23, 2026 10:29
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants