announceFieldErrors | boolean | — | Whether a control's error that appears or changes outside a submit attempt, such as after blur or async
validation, is announced politely once through the live announcer. A submit attempt never announces each field:
its focus move and errorSummary speak the errors. A cleared error announces nothing. Defaults to true; pass
false when the page announces validation itself. |
aria-description | LocalizedMessage | — | Extended description for assistive tech. |
aria-label | LocalizedMessage | — | Accessible name when the visible label is insufficient. |
aria-placeholder | LocalizedMessage | — | Hint for an empty control. |
cancelLabel | LocalizedMessage | — | Label of the cancel Button. The Button renders only when this is set, so a form with no way out has no dead
control. Pass onCancel with it. |
children | ReactNode | — | The fields: Field, Fieldset, Select, Combobox, NumberField, TextArea, DateInput, Checkbox (or CheckboxGroup), CheckboxCards, RadioGroup, RadioCards, SegmentedControl, DurationField, FileUpload, or Slider. Not Switch: a form has a Save, so no change applies on its own (ADR 0023, decision 5). The
layout stacks them in one column and draws no input of its own. |
className | string | — | Classes appended after the generated classes. Put overrides in @layer chroma.overrides. |
description | LocalizedMessage | — | Copy under the top of the form that explains it. Describes the form to assistive technology. |
errorFocus | FormErrorFocus | — | Where focus goes after a submit attempt ends with the form invalid. Defaults to
{@link FormErrorFocus.FirstInvalid}. Focus moves once per attempt, not on every render. |
errorSummary | LocalizedMessage | — | Copy for the form-level error summary. When set, a live region (role="alert") renders before
the children, is announced when it appears, and is linked to the form through aria-describedby.
The copy comes from the caller; Form ships no default string. |
extraActions | ReactNode | — | Buttons rendered before Cancel in the actions row, for example a Reset. |
footer | FormLayoutStandardFooter | FormLayoutStandardFooter.Inline | The layout draws no actions row.
Where the actions are drawn. Defaults to {@link FormLayoutStandardFooter.Inline}. |
invalid | boolean | — | Whether the form is invalid, which decides if a submit attempt moves focus. Defaults to whether
errorSummary is set. Pass it when per-field errors exist without a summary. |
noValidate | boolean | — | Sets the native noValidate attribute. Defaults to true, so browser constraint validation does
not run ahead of the validation the caller runs in onSubmit. Pass false to let the browser
block the submit and focus its first invalid control. |
onAfterReset | ((event: Event) => void) | — | Called after the form resets and no reset handler canceled it, with the platform event. Use it
to clear error state the form does not own. Form clears its own pending focus request. |
onCancel | MouseEventHandler<HTMLButtonElement> | — | Called when the cancel Button is pressed. The Button has type="button", so it never submits. |
onSubmit | ((event: FormEvent<HTMLFormElement>) => void | Promise<void>) | — | Called when the form submits, after native constraint validation passes when noValidate is
false, and unless a submit is already pending. It plays the role of ui-forms' onValid: validate here. Call event.preventDefault() to replace the native navigation with an explicit
action. Return a promise to keep the form pending until it settles. A rejection stays with the
caller; Form does not catch it. |
pending | boolean | — | Whether a submit is pending. While pending, the form sets aria-busy, ignores further submits,
and shares the state with {@link useFormPending }. Omit it to have Form track the promise the
onSubmit handler returns. The page is never covered or disabled. |
ref | Ref<HTMLFormElement> | — | Ref to the rendered form. |
requiredHint | LocalizedMessage | — | One line that explains the required-field marker, for example "Fields marked with * are required". The marker
itself is drawn by each required Field's Label. Say it once here, never on each field. |
spacing | FormLayoutStandardSpacing | FormLayoutStandardSpacing.Fields | Space between the children. Defaults to {@link FormLayoutStandardSpacing.Fields}. |
submitDisabled | boolean | — | Disables the submit Button. Not for a pristine or invalid form: Save stays enabled and the form validates on
submit (ADR 0023, decision 13). The layout tracks no field values and leaves any other reason to the caller. |
submitIntent | FormLayoutStandardIntent | — | Intent of the submit Button. Defaults to {@link FormLayoutStandardIntent.Accent}. |
submitLabel | LocalizedMessage | — | The host draws the actions, so the layout takes none of their props.
Label of the submit Button, for example "Save user". Name the action, not "Submit". |
submitPendingLabel | LocalizedMessage | — | Accessible name of the submit Button while a submit is pending. Defaults to {@link FormLayoutStandardActionProps.submitLabel},
so the name does not change. |
title | LocalizedMessage | — | Native tooltip; accessibility hint, not visible UI title text. |
width | FormLayoutStandardWidth | FormLayoutStandardWidth.Large | Maximum inline size. Defaults to {@link FormLayoutStandardWidth.Large}. |