cancelLabel | LocalizedMessage | — | Label of the cancel Button. |
children | ReactNode | — | The fields: Field, Fieldset, Select, Combobox, NumberField, TextArea, DateInput, Checkbox (or CheckboxGroup), CheckboxCards, RadioGroup, RadioCards, SegmentedControl, DurationField, FileUpload, or Slider. They stack in one column in the drawer's scrolling body. Not Switch: a form has a Save, so
no change applies on its own (ADR 0023, decision 5). Give each control a name: only named controls count toward
unsaved edits and the form data. |
closeLabel | LocalizedMessage | — | Accessible name of the header's close button. |
discard | FormLayoutDrawerDiscardCopy | — | Copy of the unsaved-changes prompt. |
onSubmit | (event: FormEvent<HTMLFormElement>) => FormLayoutDrawerSubmitOutcome | PromiseLike<FormLayoutDrawerSubmitOutcome> | — | Called when the form submits, after the block ignores a repeat submit and prevents the native navigation. Validate
here. Return {@link FormLayoutDrawerSubmitResult.Invalid} (or resolve to it) to keep the drawer open after a
failed validation, with invalid or errorSummary set so focus moves to the first invalid field. Return nothing,
or {@link FormLayoutDrawerSubmitResult.Saved}, to close. Return a promise to hold the drawer open with the submit
Button loading until it settles. A rejected promise keeps the drawer open and is not rethrown: report it from the
handler and pass errorSummary.
@param event - The submit event; read the values from new FormData(event.currentTarget) |
submitLabel | LocalizedMessage | — | Label of the submit Button. Name the action, such as "Save user". |
title | LocalizedMessage | — | Heading in the drawer header. It names the drawer. |
className | string | — | Classes appended to the drawer surface. Put overrides in @layer chroma.overrides. |
defaultOpen | boolean | false | Initial open state when uncontrolled. |
description | LocalizedMessage | — | Copy above the fields that explains the form. Describes the form to assistive technology. |
dirty | boolean | — | Whether the form has unsaved edits. Omit it to compare the form's named controls with their values when the
drawer opened. Pass it when the edits live outside the form's controls, or when a control fills in after open. |
edge | FormLayoutDrawerEdge | FormLayoutDrawerEdge.InlineEnd | Edge the drawer attaches to. |
errorFocus | FormErrorFocus | FormErrorFocus.FirstInvalid | Where focus goes after a submit attempt ends with the form invalid. |
errorSummary | LocalizedMessage | — | Copy for a form-level error summary, announced when it appears. Clear it by passing undefined. |
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. |
onOpenChange | ((open: boolean, details: DialogOpenChangeDetails) => void) | — | Called once per open or close request: trigger press, close press (header close or Cancel), Escape, and a
saved submit (form-submit). A backdrop press never closes the drawer. A close of a form with unsaved edits is
confirmed first, and a close while a submit is pending is held; neither reaches this until it will
happen. A cancelable request is vetoed with details.cancel().
@param open - The requested open state
@param details - Change metadata |
open | boolean | — | Controlled open state. Pair with {@link FormLayoutDrawerProps.onOpenChange}. |
pendingLabel | LocalizedMessage | — | Name of the submit Button while a submit is pending, such as "Saving user". Omit it to keep submitLabel as the
name. |
ref | Ref<HTMLDialogElement> | — | Ref to the rendered dialog element. |
requiredHint | LocalizedMessage | — | One line that explains the required-field marker, said once for the form: "Fields marked with * are required". |
reset | FormLayoutDrawerReset | — | A tertiary Reset action before Cancel. Pass it only when the record has defaults to return to. When the form has
edits, Reset asks before it discards them. |
scrollRegionLabel | LocalizedMessage | — | Name of the body's scroll region when it overflows and becomes focusable. |
size | FormLayoutDrawerSize | FormLayoutDrawerSize.Medium | Inline size from the Drawer size steps. |
submitDisabled | boolean | false | Disables the submit Button. Not for a pristine or invalid form: Save stays enabled and the form validates on
submit (ADR 0023, decision 13). A pending submit is shown as loading, not disabled. |
summary | LocalizedMessage | — | One status line at the inline start of the footer: a count, a save state, or a validation that spans the form, such
as "Apply at least 1 permission". Text only; it is never a button or a link. |
trigger | DialogControlElement | — | One Button or Link that opens the drawer. Omit it when the caller controls open. |