# 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="https://3357577683-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-LlnrBGdA8s50Vnplq1j%2Fuploads%2Fp1bhtlp4GVyle2ca3mnF%2Fchecklist.png?alt=media&#x26;token=0e857a71-1faf-4d29-8c1f-bd526faef4dd" 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.