Checklist

Write the rows as nana-check-item children when a detail needs markup of its own, or pass them as items when they come straight from data.

Preview

Membership approved You are 15,280 behind on your contributions. Clear it before borrowing. 200,000.00 of 3,130,260.00 limit

Show code Copy

Rows from data

When the checks come from an API, pass them as items instead of writing children. Each is { label, status, detail?, note? }.

document.querySelector("nana-checklist").items = [
  { label: "Approved membership", status: "pass", detail: "Membership approved" },
  { label: "Contributions up to date", status: "fail", detail: "You are 15,280 behind.", note: "15,280.00 overdue" },
];

Write children when a row needs markup of its own — an amount drawn by Money, a link, or a button in the row’s action slot.

3 of 3 keys Scuffs in the hallway, within fair wear Reading taken 30 Sep. Deduct from deposit Waiting on the owner

Show code Copy

Outcomes

Status	Icon	Reads to a screen reader as
pass	Green check	Passed
fail	Red cross, and the rule turns red	Failed
warn	Amber warning	Needs attention
pending	Grey clock	Not checked yet
info	Blue info	For information

summary adds a line over the list: one failure fails the list, a check still to run holds it open, and warnings let it pass with a note. Information rows are left out of the count. The summary follows the rows as they change.

Installation

npm install @nana-tec/ui-components

Or copy the source in and own it:

npx @nana-tec/ui add checklist

Usage

import "@nana-tec/ui-components/checklist";

<nana-checklist label="Loan eligibility" summary>
  <nana-check-item status="pass" label="Approved membership">Membership approved</nana-check-item>
  <nana-check-item status="fail" label="Contributions up to date" note="15,280.00 overdue">
    You are 15,280 behind on your contributions. Clear it before borrowing.
  </nana-check-item>
  <nana-check-item status="pass" label="Amount within your borrowing limit">200,000.00 of 3,130,260.00 limit</nana-check-item>
</nana-checklist>

API

Properties

Property	Attribute	Type	Default	Description
items	items	ChecklistItem[]	[]	The rows as data, used when there are no nana-check-item children
label	label	string	''	What is being checked; names the list for a screen reader and heads the summary
noDividers	no-dividers	boolean	false	Leave out the lines between rows
summary	summary	boolean	false	Show a line over the list saying how it came out

Slots

Slot	Description
(default)	The nana-check-item rows
header-actions	Controls beside the summary, such as a re-run button

CSS parts

Part	Description
::part(base)	The section
::part(header)	The summary line
::part(headline)	The summary's words
::part(count)	How many checks passed
::part(list)	The rows

CSS custom properties

Property	Description
--nana-checklist-divider	Colour of the line between rows
--nana-check-pass	Colour of a list where every check passed
--nana-check-fail	Colour of a list where a check failed
--nana-check-warn	Colour of a list where a check needs attention

Storybook

Explore Checklist interactively Every state, prop, and edge case — with live controls — in Storybook.

View in Storybook