Standard form layout patterns for building well-structured forms. Provides two variants: a basic layout for simple forms and a validation-aware layout that reserves message space to prevent layout shifts when errors appear.
Heading
For forms with minimal or no validation as errors will impact layout.Uses a large Stack for fields, with a xlarge Stack separating the actions from the form.
Use the basic variant (above) for simple forms where validation errors are unlikely or where layout shift on error is acceptable.Use the validation variant (below) for forms that are more likely to show inline validation errors. The reserveMessageSpace prop on each field prevents content shifting when messages appear.
For forms that are more likely to show validation errors, it is recommended to use reserveMessageSpace to prevent the elements shifting when messages appear.Uses a small Stack for fields, with a large Stack separating the actions from the form.