[Field] Add focused and filled states

[nizhnyk]

Feature request

Summary

The Field component in Base UI is missing built-in support for focused and filled states, which are essential for creating modern, user-friendly forms. These states allow developers to indicate when a field is active (focused) or has content (filled), improving the user experience and consistency across applications.

Examples in other libraries

Material-UI (MUI): TextField supports these states with useFormControl hook. Documentation
Base UI v5 (Old base UI): Also had focused and filled states with FormControl
HeadlessUI: Supports focused state. Documentation

Motivation

Adding focused and filled states will:

1. Provide better visual feedback for users.
2. Allow developers to style fields dynamically without custom implementations.
3. Align Base UI with other libraries, making it more competitive and developer-friendly.

This feature is critical for creating intuitive, modern forms and would benefit developers working on user-focused applications.

[colmtuite]

I'm not seeing why this is "essential for creating modern, user-friendly forms"?

You can do:

<Field.Control className="TextField" />

.TextField:focus {
  outline: 2px solid blue;
}

You also have the data-dirty and data-touched attributes for handling the presence of content.

[nizhnyk]

I'm not seeing why this is "essential for creating modern, user-friendly forms"?

You can do:

<Field.Control className="TextField" />

.TextField:focus {
  outline: 2px solid blue;
}

You also have the data-dirty and data-touched attributes for handling the presence of content.

As I understand the whole purpose of having a Field component is to wrap all the elements and share the same state between them (Label, Input etc). Your suggestion will not work if I'm trying to style Label or Root component based on the state of input element (focused, filled). Of course I can use different CSS magic to style label if input is focused, but this adds complexity and in my opinion defeats the purpose of Field component.

data-dirty is only assigned when the value has changed. This will not work when rendering a controlled input element with value already assigned.

Additionally, this prevent migration from Material UI, old Base UI as it will require re-design of all fields making them less modern.
As I understand, next Material UI version will be built on Base UI, where at that time it will become evident that these states are essential for building a nice looking and user friendly field components.