Data Display & Media

Check Item

One rule in a checklist and whether it holds: an icon for the outcome, the rule in a line, and what was found. A failed rule turns its line red and can carry the action that clears it.

View .md Download

The outcome is said in words to a screen reader as well as drawn, so the colour is never the only signal.

Preview

You are 15,280 behind on your contributions. Clear it before borrowing.

<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>

A row in a Checklist; see that page for the outcomes and the summary. On its own it is a single rule and its result.

You are 15,280 behind on your contributions. Clear it before borrowing.

<nana-check-item
  status="fail"
  label="Contributions up to date"
  note="15,280.00 overdue"
  style="max-width: 28rem"
>
  You are 15,280 behind on your contributions. Clear it before borrowing.
</nana-check-item>

Installation

npm install @nana-tec/ui-components

Or copy the source in and own it:

npx @nana-tec/ui add check-item

Usage

import "@nana-tec/ui-components/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>

API

Properties

Property	Attribute	Type	Default	Description
`label`	`label`	`string`	`''`	The rule, in a line
`note`	`note`	`string`	`''`	An emphasised line under the detail, such as the amount overdue
`status`	`status`	`CheckStatus`	`'pending'`	Whether the rule holds

Slots

Slot	Description
`(default)`	What was found, under the rule
`action`	A control that resolves the check, such as a Pay now button
`icon`	Replaces the outcome icon

CSS parts

Part	Description
`::part(base)`	The row
`::part(icon)`	The outcome icon
`::part(label)`	The rule
`::part(detail)`	What was found
`::part(note)`	The emphasised line under the detail
`::part(action)`	The action area

CSS custom properties

Property	Description
`--nana-check-pass`	Colour of a passed check
`--nana-check-fail`	Colour of a failed check
`--nana-check-warn`	Colour of a check that needs attention
`--nana-checklist-item-padding`	Space above and below the row

Storybook

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

View in Storybook