Field

From the Base UI reference for Field and the installed FieldRoot, FieldLabel, FieldDescription and FieldError. Field adds no keys: every key is the control's.

The error stays a plain <div>, read through the control's aria-describedby, with no live region of Field's own. Base UI mounts the error only with its message, and a live region inserted with its content is not reliably announced; a role="alert" would interrupt on every keystroke with validationMode="onChange"; and the person hears the error when focus reaches the control, as Base UI's Form moves focus to the first invalid control on submit.

What axe won't catch, from the contract, each with how this component meets it:

• Everything the eye is told, the ear is told, for every shape each prop accepts: the label names the control, even hidden, and the optional mark is inside it, so the ear hears "(optional)" in the control's name; the description and the error are the control's aria-describedby, so the ear hears both with the control; an invalid field is aria-invalid and its error is words, never only the control's red edge.
• Every landmark and named region has an accessible name: none here; Field is not a landmark, and a group of fields is a Fieldset's to name.
• Every default label can be overridden: optionalLabel overrides "(optional)", Field's one owned string (see Owned strings).
• Every shape the type accepts renders, in every variant: label, description and error render a string, an element and a list alike; a long Danish compound wraps in each (CR-8); Base UI's several messages render as a list.
• A hidden copy kept for animation is aria-hidden, and a collapsed region is inert: none here; the error is unmounted while the field is valid, and the description while it is not given.
• Native semantics first: a native <label> with htmlFor, a <p> for the description, and the control's own semantics; Perron adds no ARIA, and Base UI only aria-labelledby, aria-describedby and aria-invalid.
• Focus moves in reading order and returns on close: the control is the field's one tab stop, and the label, description and error sit around it in reading order; nothing opens or closes.
• Every target is at least size.target-min square: the control's, which is the control's own; the label is a larger target for the same control, with no size of its own to meet.
• Loops stop when the system asks for less motion: none here; Field has no loop and no transition (CR-9).

optional is new, described in en.ts as A field's label: after the words of a field the person may leave empty, as in "Stop name (optional)"., with the Danish, Swedish and Norwegian written by the build. It is lowercase in its brackets, since it follows the label's words rather than starting a sentence, as Content design's sentence case reads.

Every other word is the caller's, through label, description and error, or Base UI's message for a failing check, which is the caller's validate result or the browser's own.

Field marks an optional field, never a required one. optional (default false) adds the owned "(optional)" after the label's words, inside the label element, in color.text.secondary, so it is part of the control's name for the ear as well as the eye; optionalLabel overrides it on one instance. Most fields in a form are asked for, so the few that aren't carry the mark, and the words need no legend, where an asterisk does. Field can't read required, which is the control's prop, so it draws no required marker: TextField, Select and the other dependents take optional and pass it through, and a screen whose label already says it writes nothing more.

Field keeps Base UI's showing of the browser's own message for a failing native check, such as required, when the caller gives no error, as a known exception to the owned strings. The browser writes that message in its own interface language, which may not be PerronProvider's; owning one string per check would take a new key for each of the ten native checks for messages a screen should word for its own field ("Enter a stop name", not "Please fill in this field"); a caller who wants the field's own words gives error, or slotProps.error.match with its own children; and the message appears only after a check fails in the browser, never in the server-rendered markup the contract story's owned-strings check reads.

For a caller using the component, with the reason. Each row is a rule: a must row's Don't is never right, a should row's needs a reason, and Checked by says what catches the Don't in a caller's code.