mui / mui/base-ui

[field] Root required attribute via FieldRootContext

Open
#2,091 3 comments 2 reactions 0 assignees View on GitHub
component: field
Dominant language
TypeScript
Stars
10.9k
Forks
543
Avg merge
1d 20h
Merged PRs (30d)
101

Description

# Feature request

## Summary

Support providing `Field.Root` with a `required` parameter that would be added to the `FieldRootContext` and be accessible to all `Field` components, specifically `Field.Label` and `Field.Control`. `Field.Root` currently supports passing `disabled` to the underlying Field Control, and `required` and `disabled` feel _very_ similar.

This would allow custom `Field.Label` components to access the `FieldRootContext` to display a visual indicator in the label, indicating the field is required, such as an asterisk, e.g. `Phone Number *`. The `Field.Control` would also set this the `required` attribute if it's been set on the `FieldRootContext`.

## Examples in other libraries

`useFormControl` in [MUI](https://mui.com/material-ui/react-text-field/#useformcontrol) supports accessing the `required` value. I wonder if there's a similarity there?

## Motivation

I'm utilizing the `Field` components to build a HOC `FieldControl`. This component provides styling for the `Field` components. One thing that felt odd was in order to display a `*` symbol for a required field on the label, the consumer would need to adorn both the `Field.Label` and `Field.Control` with `required`.

![Image](https://github.com/user-attachments/assets/924d460d-3c8e-4baf-bfb4-8c959d7762b1)

The workaround would be to provide my own `FieldControlContext` with a `required` property. Since I own wrapped implementations of `Input`, `Checkbox` and other `Field.Control`s.

I can easily work around this **without** Base UI changes. However, in doing so it made me pause and wondered if this was something that should actually be included in the `FieldRootContext`.

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.