Form field

Label, help and error layout for a slotted control.

<mm-form-field label="Owning team" help="The team paged when this asset fails a freshness check.">
  <my-team-picker name="team"></my-team-picker>
</mm-form-field>

Guidance

A layout wrapper that gives any slotted control the Marmot field furniture: a label above, then the control, then an error line and help text. Use it when composing a custom control; the built-in controls (mm-text-field, mm-select and so on) render their own.

The label and messages live in the shadow root, so the field names the slotted control with aria-label and describes it with aria-description, and sets aria-invalid and aria-required. Elements slotted into label, help and error stay in the light DOM and are wired with aria-labelledby and aria-describedby instead. Attributes the author set are never overwritten. Clicking the label focuses the control.

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Field label; the accessible name of the slotted control.
help	help	string	''	Help text under the control.
error	error	string	''	Error text: a sentence saying what to fix.
required	required	boolean	false	Shows "Required" beside the label and sets aria-required on the control.
optional	optional	boolean	false	Shows "Optional" beside the label.
hideLabel	hide-label	boolean	false	Hides the label visually; it stays the accessible name.
control		HTMLElement | null		The slotted control that receives the label and description.

Slots

Slot	Description
Default	The control.
label	A rich label, in place of the label attribute.
help	Rich help text, in place of the help attribute.
error	Rich error text, in place of the error attribute.

CSS parts

Part	Description
label	The label.
control	The wrapper around the slotted control.
help	The help line.
error	The error line.

Examples

Every state of mm-form-field in Storybook, with keyboard and screen reader tests.