Skip to content

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

Open
dmytrokirpa wants to merge 4 commits intomasterfrom
feat/react-checkbox-base-hooks
Open

feat(react-checkbox): add useCheckboxBase_unstable hook#35826
dmytrokirpa wants to merge 4 commits intomasterfrom
feat/react-checkbox-base-hooks

Conversation

@dmytrokirpa
Copy link
Contributor

@dmytrokirpa dmytrokirpa commented Mar 3, 2026

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
Copy link

github-actions bot commented Mar 5, 2026

Pull request demo site: URL

@github-actions
Copy link

github-actions bot commented Mar 5, 2026

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-checkbox
Checkbox
33.522 kB
11.407 kB
33.656 kB
11.448 kB
134 B
41 B
react-components
react-components: entire library
1.292 MB
323.336 kB
1.293 MB
323.383 kB
140 B
47 B
react-list
ListItem
110.695 kB
32.627 kB
110.829 kB
32.665 kB
134 B
38 B
react-table
DataGrid
159.313 kB
44.939 kB
159.457 kB
44.978 kB
144 B
39 B
react-table
Table as DataGrid
130.528 kB
35.943 kB
130.672 kB
35.964 kB
144 B
21 B
react-table
Table (Selection only)
68.916 kB
19.309 kB
69.06 kB
19.35 kB
144 B
41 B
react-table
Table (Sort only)
67.559 kB
18.924 kB
67.703 kB
18.967 kB
144 B
43 B
react-tree
FlatTree
147.635 kB
42.134 kB
147.773 kB
42.162 kB
138 B
28 B
react-tree
PersonaFlatTree
149.463 kB
42.517 kB
149.599 kB
42.555 kB
136 B
38 B
react-tree
PersonaTree
145.523 kB
41.338 kB
145.661 kB
41.376 kB
138 B
38 B
react-tree
Tree
143.701 kB
40.972 kB
143.839 kB
41.006 kB
138 B
34 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.62 kB
68.716 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 ec5736348028dcf9a0fbebb818a79242d23b4e1c

@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
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.

1 participant