> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/checklist.md).

# Checklist

The `CheckList` component displays list items with colored checkmarks (✓) or crosses (X). Each item can have a callback function for interaction.

### Preview

<div align="left"><figure><img src="/files/wf3sRZ6sO07oJbk65mxf" alt="Gravity checklist component" width="184"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { CheckList } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <CheckList items={[
      { name: 'Item 1', checked: true, color: 'green' },
      { name: 'Item 2', checked: false, color: 'red' },
    ]} />
  );
}

```

### Props

| Props     | Description                                        | Required | Value                                                            |
| --------- | -------------------------------------------------- | -------- | ---------------------------------------------------------------- |
| className | custom styles                                      | optional | SCSS or Tailwind                                                 |
| items     | list items with checked status, callback and color | required | array \[{ checked: boolean, callback: function, color: string }] |

### Example

```javascript
import { CheckList } from 'components/lib';

function Example({ ...props }) {

  const items = [
    { name: 'Item 1', checked: true, callback: () => alert('Item 1 clicked'), color: 'green' },
    { name: 'Item 2', checked: false, callback: () => alert('Item 2 clicked'), color: 'red' },
    { name: 'Item 3', checked: true, color: 'blue' },
    { name: 'Item 4', checked: false },
  ];

  return (
    <div>
      <CheckList items={ items } />
    </div>
  );
}

```

### Notes

* The `CheckList` component uses the `Icon` and `cn` functions from `'components/lib'`.
* The `items` prop provides an array of objects with `checked` status, `callback` function, and `color`.
* The `className` prop allows for custom styling to be applied.
* Each item can have an optional `callback` function that gets called when the item is clicked.