Forms

Overview

Our programs rely on forms to collect essential user data, support user engagement, and ensure accessibility.

Use the forms component to organize and standardize fields on a form page, and combine it with grid and container components, such as fieldsets and input groups, to control spacing and layout.

For detailed guidance on designing and building accessible, easy-to-use forms, see the Form Best Practices page.

Design and Layout

Group Related Fields with Fieldsets and Legends

Group related fields in all data entry forms using fieldsets to help users easily digest information and stay on track.

• Use the fieldsets and legends component to group related fields under a higher-level question or label (i.e., a legend), such as Mailing Address or Personal Information.
• Incorporate i-grid an block within each fieldset to control layout.
• See a complete form example from Sample Pages.

Dos and Don’ts

Do

• Do use default (medium) size fields in all data entry forms. Small fields should only be used in data tables, toolbars, maps, and other dense UI arrangements.
• Do break up long forms into sections using fieldsets and a progress bar.

Don't

• Don’t mix and match field sizes, especially on the same row of a layout.
• Don’t use small-size fields as a responsive approach for smaller viewports. Medium-sized fields are optimized for touch interaction and should be preferred on touchscreens.

Installation

Props

Slots

Events