[form controls] Make control state available outside `Field.Root`
- Dominant language
- TypeScript
- Stars
- 10.9k
- Forks
- 543
- Avg merge
- 1d 20h
- Merged PRs (30d)
- 101
Description
# Feature request
## Summary
I would like to access the `state` object from the render prop of components like Input and Select without needing to wrap the control in Field.Root.
Currently, state is available in the render function:
```tsx
{
<>
{state.filled && }
)}
/>
```
…but the values of state (dirty, touched, filled, focused) do not update unless the control is wrapped in `Field.Root`, as mentioned in the docs for the relevant data attributes. Since these properties describe the control itself, not just the field, it would be convenient if the state were accurate at the control level.
## Motivation
I want to implement UI behaviour based on the control's state without introducing a Field.Root wrapper for every individual control.
Example: https://codesandbox.io/p/sandbox/control-state-llh87m
Contributor guide
Assessment
This issue has not been assessed yet.