Default

Below is an example of how a Compacta may be used with fields and inputs. Any form related elements can exist inside a Compacta.

Error states

When a user attempts to progress through the form, errors are captured at this point. Any Compacta that has an error will automatically open and highlight the error inline.

User experience

The Compacta was designed to meet the need of capturing multiple instances of detailed information without overwhelming users, particularly on mobile devices. An example use case may be multiple questions about a customers’ assets.

The drawer has an easy and familiar show/hide interaction. The 'Add another' and 'Remove' buttons are left-aligned and positioned at the bottom of an open Compacta. This placement, along with the numbering of each Compacta are both accessibility considerations for users who rely on zoom functionality, ensuring they can easily locate these controls without needing to search across the screen.

States and behaviours

The Compacta has 2 states: open and closed.

Default state: the first Compacta is open.

Adding another: the previous Compacta automatically closes a new Compacta appears in an open state.

Opening, editing, and closing: the user is free to open, edit, and close any Compacta at any time.

Assigned fields

It is possible to surface content on a Compacta when it’s in its closed state and an important part of making the component work. This enables users to scan important information without opening, making the review process faster and less overwhelming. There are up to three fields with which a designer and developer can assign to surface in the Compacta closed state. Generally speaking there should be a minimum of 2 and a maximum of 3 fields to give enough context and meaning.

An example may be:

1 NAME: to differentiate on multi-applicant forms

2 TITLE: of product or ‘thing’

3 AMOUNT: or numerical detail

Pre-populated content

Pre-populating fields with content brings complexity for data management, technology, data quality, risk and compliance, and users’ cognitive load. However, if done well with good quality data it can expedite form progress.

Dos and don'ts

• Don’t nest Compactas within Compactas
• It should never be used to simply “tidy up the screen”

Where is this available?