Install the component dependency:
Include a React component in your project:
Here's a fully functioning form that does everything short of submitting to a server.
Forms should be horizontally left-aligned, with one input control per line, and inputs are stretched to the full container width. Bring your own container.
Form.VerticalLayout takes care of the vertical spacing between controls.
Dividers are simple visual indicators that break form flow and content into logical pieces.
Forms commonly have multiple buttons that a user can interact with. Those buttons should be on a single row and left-aligned.
Form.ButtonRow will help.
Each one of these controls is a separate package. They are mean to be used inside the
Form layout component. Find links to the docs below
Write labels in sentence case. Capital case is not optimal for scannability.
Don't rely on the placeholder. Use the label to specify the purpose of each field to avoid usability issues.
Use field length as affordance. If a field has a defined character count, use it to determine the field length.
Specify errors inline. Show where the error occurs and a clear reason for the error so users can find it in context.
Rather than implying a required field with a marker (*), consider noting optional fields instead.
Form.Divider to group similar fields together into logical groups for users to parse the form more effectively.