Make control state available outside `Field.Root`

[KenanYusuf]

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:

<Input
  render={(props, state) => {
    <>
      <SearchIcon fill={state.focused || state.filled ? 'gray' : 'black'} />
      <input {...props} />
      {state.filled && <ClearButton />}
    </>
  )}
/>

…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

[mj12albert]

This would apply to:

• autocomplete
• checkbox(group)
• combobox
• input
• number field
• radio(group)
• select
• slider
• switch

It should be done so that the states are propagated to Field components if used, there are valid use cases for styling them based on the data attrs and also avoids a breaking change