A field set is a container for different components, particularly user inputs.
Applies to:
Uses
Container
The most common use for a field set is as a container component. As a container, it can house different elements and symbols on a page to improve the page’s hierarchy and, consequently, the user’s flow.
Items that are part of the same user journey should be grouped. In the example below, you can see that the sign-up form elements are all grouped together while the ‘login’ link is outside of the field set.
Grouping
Some forms will use field sets to group parts of a form. This is to avoid confusion and make filling out the form easier. As you can see in the below example, the billing and shipping addresses need to be grouped and labeled so that users can fill them in with less chance of making a mistake.
Documentation
The design team can also use a field set to document the different elements used in a big project. Documenting and organizing the various elements in a project improves consistency and reduces creation time.
You would usually only document the user inputs for wireframes, but you can also add any custom symbols or components.
