Groups

Joe Julian Updated by Joe Julian

Groups ↔

Groups are designed for horizontally grouping small amounts of data that belong to the same logical entity, such as a start date and start time for an absence or a person's date of birth and age. They were designed to be used inside a vertical layout.

When groups are used to display multiple text fields on the page simply to take up empty space, they become less accessible for users due to the issues mentioned in our accessibility article. 👎

Groups are used best when:

  • 🤏 They have fewer fields in them. As it's easier to read the page vertically.
  • 💾 The fields are different types of data, such as a date value for date of birth and a numeric value for age. As this makes it easier for people to read along a group horizontally.
  • 📎 They logically belong to the same entity. Research has shown that having 2 or 3 fields in a horizontal group didn’t cause issues if they logically belonged to the same single entity, such as a person's date of birth and their age. There's some ambiguity over what classifies fields as belonging to the same entity. Ultimately it's up to you to decide what's logical based on the context of the situation and the cognitive load it requires of your users.

We recommend using small, horizontal groups of tightly related fields within the vertical layout of a section. This keeps the layout organized and easy to scan.

Was this article useful?

Sections

Contact