Form is a set of components that help to systematically layout and build forms.
Form includes three sub-components to build forms — Form Group, Form Text and Form Feedback. You can read more about general form layouts and patterns in Form Design Pattern.
Form Group can be wrapped around components used in a Form, such as Input or Radio. Form Group has three sizes — large, medium and small. The size controls the spacing between the groups.
Form Text should be used to display informational text that helps the user with data entry.
Form Feedback should be used to display text that provides validation information about a specific input such as an error or a warning. If both Form Text and Form Feedback are used on a component, Form Feedback should replace Form Text until resolved.
Use the status property for components used in Form to provide feedback to the user during form validation.
Form Feedback color is controlled by the status property.
In Form, labels can be placed on top of components or to the left. All labels in a single form should use the same placement.
Form can be designed to have a single column or multiple columns and change layout based on breakpoint. When adding form into a page, be sure to follow the Layout guidelines for responsive breakpoints, margins and gutters.
The recommended placement for action buttons is the right edge of a form. When using right alignment of buttons, the primary action should be the right-most button with the secondary action to the left. If a tertiary action is required, then it should be placed to the far left.
Left alignment is best used for a single button. When using left alignment for multiple buttons, the primary action should be the left-most button with the secondary action to the right. If a tertiary action is required, then it should be placed to the far right.
Required fields can be indicated using an asterisk. If all fields are required, then all fields do not need to be marked. If needed for clarity, all fields required could be included in the instruction at the top of the form. Read more about required field patterns.
DO: Use an asterisk appended to the end of the label for the required field. The asterisk color can match the label text or use the bold red color token if more prominence is needed.