Spacing

The correct spacing indicates context to the user. The size of spacing varies to clearly group sections or elements together.

Forms should have consistent spacing 8px between each element needed to make up an input, label and helper/error copy.

Stacks

React native has several <Stack> components specifically for forms. These should be used to maintain consistency across the platform.

Element Spacing

Field Group Spacing

A field group is a combination of two or more elements, such as a label and an input. There should be a 16px spacing between field groups.

Fieldset Spacing

A fieldset is a combination of two or more field groups.

Use space and headings to break long forms into fieldsets. The spacing value could increase to 32px to define each fieldset clearly.

Fieldsets

When asking the user to input content in a specific structure, you can use multiple input fields (fieldsets). An example of this is memorable dates, such as the date of birth. We should use three separate text input fields and a legend heading.

Each product's requirements will vary, but grouped inputs should:

• Allow the user to copy/paste data into the field group, not just a single input
• Have a single error message across the group
• Be able to navigate between with keyboard controls

Radio buttons and Checkboxes

Fieldsets & Buttons

There should be a double spacing of 32px between the last field and the button group across all breakpoints.

Validation

There should be a space of 16px between the error message and the next group of related fields.