# Check Item

> Source: https://design.nanatec.co.ke/components/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.
> Status: beta
> Since: v0.0.37

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

## Preview

```html
<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](/components/checklist/); see that page for the
outcomes and the summary. On its own it is a single rule and its result.

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

```bash
npm install @nana-tec/ui-components
```

Or copy the source in and own it:

```bash
npx @nana-tec/ui add check-item
```

## Usage

```js
import "@nana-tec/ui-components/check-item";
```

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

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-check-item--docs