Form

Usage

• Use Form as a fieldset container that wraps Pluma form controls, manages their disabled states, and handles form submission.
• Add only the most necessary fields required for completion — shorter forms lead to higher completion rates.
• Pair Form with FormLayout to handle field grouping and consistent spacing.
• Use FormLayoutGroup inside FormLayout to place related short fields side by side (e.g., first and last name). Give unrelated fields their own row.

Behaviors

• Disabled state (isDisabled) — disables all nested form controls and blocks submission. Use to restrict access or display read-only data.
• Auto-loading state (autoLoading) — when enabled, automatically locks all fields while the onSubmit handler's returned promise is pending. Re-enables fields once the promise resolves or rejects.

Content

• Display validation errors inline using each form control's built-in error message prop. Never show errors as a separate summary banner at the top or bottom of the form.
• Write error messages that clearly state what is missing or what action the user can take.

Implementation Notes

• Form renders a <fieldset> internally to cascade disabled to all child form controls — consumers do not need to disable each child individually.
• autoLoading defaults to true in React but false in Ember. Explicitly set this prop when consistent cross-framework behavior is needed.
• onSubmit prevents the native form submission event by default when provided. Return a promise from onSubmit to trigger the auto-loading behavior.
• Form is polymorphic via Box — the as prop defaults to 'form'.
• React uses children for content. Ember uses {{yield}} (default block).
• Ember component name is PlumaForm (<PlumaForm>); React export is Form.