Form layout

Overview

Form layouts are used to arrange fields within a form using standard spacing. Fields are stacked vertically, but can be further grouped into rows using the EzLayout component.

This component is under development

There will likely be breaking changes to the API. Proceed with caution.

Best Practices

Forms should:

Follow a predicable order, guiding the user to fill out the most important content first
Group related tasks under section titles to provide more context and make the form easier to scan

Examples

Standard form layout

Code example

Preview

Code

Playroom

First name

Last name

Favorite Number

Field groups

Visually grouping closely related fields such as state and zip code, or start and end dates can help users make sense of the information they must fill in.

Fields that are not directly related to each other should not be visually grouped together as this can make it easier to overlook certain fields.

Use EzLayout to arrange fields into groups, or to vary field layouts across different screen sizes and device types.