docs(react-form): add Chakra UI integration guide #1909
Conversation
…umentation Add comprehensive Chakra UI integration examples to the UI libraries guide, covering both composable (Checkbox.Root) and pre-composed Checkbox components. Includes code examples demonstrating how to integrate Chakra UI's Input and Checkbox components with TanStack Form's Field component, maintaining consistency with existing Mantine, Material UI, and shadcn/ui examples.
|
Adebesin-Cell
changed the title
Adebesin-Cell
changed the title
LeCarbonator
left a comment
LeCarbonator
left a comment
There was a problem hiding this comment.
Looks good! I only have a small nitpick, though it’s possible it simply has to be done this way. Let me know, or feel free to adjust the snippets, and I’ll merge it in.
Thanks for the addition!
| children={({ state, handleChange, handleBlur }) => ( | ||
| <Checkbox.Root | ||
| checked={state.value} | ||
| onCheckedChange={(details) => handleChange(!!details.checked)} |
There was a problem hiding this comment.
This double negation seems weird for a (seemingly) boolean property. Is this accidental?
There was a problem hiding this comment.
Hey @LeCarbonator, thanks for pointing that out!
The double negation (!!) here is intentional. In Chakra v3, the Checkbox’s onCheckedChange provides a CheckedChangeDetails object where checked is typed as:
type CheckedState = boolean | "indeterminate";
interface CheckedChangeDetails {
checked: CheckedState;
}Our form state (state.value) expects a strict boolean, so passing details.checked directly would cause this TypeScript error:
Argument of type 'CheckedState' is not assignable to parameter of type 'SetStateAction<boolean>'.
Type '"indeterminate"' is not assignable to type 'SetStateAction<boolean>'.
Using !!details.checked ensures the value is always a boolean (true for checked, false for unchecked or indeterminate), which satisfies the type checker and avoids runtime issues.
There was a problem hiding this comment.
I see ... Is this common knowledge for Chakra users, or do you think a comment explaining this would help at that line?
// coerce 'indeterminate' to false
There was a problem hiding this comment.
Good idea 👍
This behavior is documented in the Chakra docs and shown in examples for controlled state and indeterminate checkboxes:
- https://chakra-ui.com/docs/components/checkbox#controlled
- https://chakra-ui.com/docs/components/checkbox#indeterminate
So it should be familiar to Chakra users, but I agree it’s not immediately obvious why the coercion is needed when reading the snippet.
Adding a small comment like you mentioned:
// coerce 'indeterminate' to false
would help clarify the intent. I’m happy to add it.
There was a problem hiding this comment.
Hi @LeCarbonator, I added a line in docs, I hope that helps: e6a7908 (#1909)
| children={({ state, handleChange, handleBlur }) => ( | ||
| <Checkbox | ||
| checked={state.value} | ||
| onCheckedChange={(details) => handleChange(!!details.checked)} |
2 participants
🎯 Changes
Add Chakra UI integration guide to the TanStack Form UI libraries documentation. This addition covers both composable and pre-composed Checkbox components, providing developers with clear examples for integrating Chakra UI with TanStack Form.
✅ Checklist
pnpm test:pr.🚀 Release Impact