mui / mui/base-ui

[form controls] Make control state available outside `Field.Root`

Open
#3,078 1 comment 0 reactions 0 assignees View on GitHub
type: enhancement waiting for 👍
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

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.