Form Section List — Cayuse Design System

Examples

Section list with status icons

html

<ul class="cds-section-list">
  <li>
    <button type="button" class="cds-section-list__item">
      <span class="cds-section-list__status cds-section-list__status--complete" aria-hidden="true">✔</span>
      General information
      <span class="sr-only">— complete</span>
    </button>
  </li>
  <li>
    <button type="button" class="cds-section-list__item is-current" aria-current="step">…</button>
  </li>
</ul>

Figma properties

Property	Values	Notes
`Section Icon → Status`	Complete · Error · Not Viewed · Required · Eye	The canonical icon set.
`Section Step`	Current Section · Next Section	Position in the sequence.
`cc1 / CCyes Section Icon`	Complete · Error · Required · Flagged · To Do · Comments · Saving	Two in-progress explorations of an expanded icon set.

Original Figma description & what changed

From Figma: Forms sections made by users use to complete forms. The form sections are used to convey to the user what steps are needed to be completed before the user can complete all actions' Used to track where the user is with in a step by step process. It is shown in a table of contents style, with checkmarks and wether or not the section is complete or not.

What changed: The original has a broken sentence and a stray apostrophe, and says “form sections” three times without defining the component’s job. Rewritten around what it does for the user: shows the whole sequence, what state each part is in, and where they are — and doubles as the navigation between them.

An open design exploration

The icon set is unresolved, and the questions are recorded in the file

Two alternative icon sets sit on the Figma page alongside the shipped one. The notes describe the goal — “make the icons lighter, not as big and chunky” — through decontainerising the menu, moving icons left versus right, trying solid against light Font Awesome weights, and handling sections that need more than one icon.

Two problems are explicitly listed as unsolved:

“I’m not sure what colour to use to show something requires attention without using red (which screams ERROR).”
“Comments and Flag icons need to be solid and they don’t work well inside circles. The ‘To do’ icon is intended to be a checkbox but I don’t think it works.”

On the colour question, the palette already contains the answer the exploration is looking for: the Status Pill ramp distinguishes orange — “requires the user’s immediate attention” — from red, which is reserved for errors. Reusing that established distinction would keep “needs attention” and “is broken” visually separate without inventing a new colour, and would mean the two components teach the same vocabulary.

Usage

When to use it

Use for forms long enough to be split into sections.
Let the user jump to any section, not just the next one.
Show completion state so the user can see what remains.
Mark the current section with aria-current="step".
Pair with Previous/Next for sequential movement.

When not to use it

Do not lock sections behind completion of earlier ones unless there is a real dependency.
Do not use icon or colour alone for status — include text for assistive technology.
Do not use it as general page navigation; that is a Side Menu.
Do not show an error state on a section the user has not visited yet.

Accessibility

Status icons are aria-hidden, with the state given as visually hidden text — “General information — complete”. Otherwise the state is invisible to screen readers.
The current section carries aria-current="step".
Items are buttons or links, not styled list items, so they are focusable and operable.
Do not use red as the only signal for “needs attention” — see the exploration note.

Tokens consumed

Token	Applied to	Resolves to
`--success-text`	Complete icon	`--color-green-500`
`--error-text`	Error and required icons	`--color-red-500`
`--menu-active`	Current section fill	`--color-blue-100`
`--navigation-active`	Current section left bar	`--primary-brand-color`
`--container-border`	List border	`--color-gray-300`