npm package: @paprika/collapsible-checklists
Description: A controlled component that has checkable groups of checkable items. Checking the parent checks all of the children.
Author: @paprika
Latest version: 1.0.39

<!-- start: Autogenerated - do not modify -->

# @paprika/collapsible-checklists

## Description

A controlled component that has checkable groups of checkable items. Checking the parent checks all of the children.

## Installation

```
yarn add @paprika/collapsible-checklists
```

or with npm:

```
npm install @paprika/collapsible-checklists
```

## Props

### CollapsibleChecklists

| Prop     | Type | required | default | Description                                        |
| -------- | ---- | -------- | ------- | -------------------------------------------------- |
| children | node | true     | -       |                                                    |
| onChange | func | true     | -       | Callback triggered when the input state is changed |

### Group

| Prop                     | Type | required | default | Description                                                           |
| ------------------------ | ---- | -------- | ------- | --------------------------------------------------------------------- |
| children                 | node | false    | []      | Probably an array of "Items", but could be a Spinner or anything else |
| isCheckedByDefault       | bool | false    | false   | If checkbox is checked by default                                     |
| isDisabled               | bool | false    | false   | If CollapsibleChecklists is disabled                                  |
| isIndeterminateByDefault | bool | false    | false   | Sets a visual state whether a checklist has been checked or not       |
| onExpand                 | func | false    | null    | Sets if the CollapsibleChecklists is open                             |
| title                    | node | true     | -       | Indicate the title for the checklist                                  |

### Heading

| Prop     | Type | required | default | Description            |
| -------- | ---- | -------- | ------- | ---------------------- |
| children | node | true     | -       | Content of the heading |

### Item

| Prop       | Type | required | default  | Description                        |
| ---------- | ---- | -------- | -------- | ---------------------------------- |
| children   | node | true     | -        |                                    |
| isChecked  | bool | false    | false    | If the item is checked or not      |
| isDisabled | bool | false    | false    | If the item is disabled            |
| onChange   | func | false    | () => {} | Callback when user checked an item |

<!-- end: Autogenerated - do not modify -->
<!-- content -->

## Usage

```js
import CollapsibleChecklists from "@paprika/collapsible-checklists";

const YourComponent = () => {
  return (
    <CollapsibleChecklists
      onChange={() => {
        /*...*/
      }}
    >
      <CollapsibleChecklists.Heading>Flowers</CollapsibleChecklists.Heading>

      <CollapsibleChecklists.Group title="Roses">
        <CollapsibleChecklists.Item isChecked>Damask</CollapsibleChecklists.Item>
        <CollapsibleChecklists.Item isChecked>Eden</CollapsibleChecklists.Item>
        <CollapsibleChecklists.Item isChecked>Lady Banks</CollapsibleChecklists.Item>
      </CollapsibleChecklists.Group>

      <CollapsibleChecklists.Group title="Irises">
        <CollapsibleChecklists.Item isChecked>Siberian</CollapsibleChecklists.Item>
        <CollapsibleChecklists.Item>Yellow</CollapsibleChecklists.Item>
        <CollapsibleChecklists.Item isDisabled>Bearded</CollapsibleChecklists.Item>
        <CollapsibleChecklists.Item>Netted</CollapsibleChecklists.Item>
      </CollapsibleChecklists.Group>
    </CollapsibleChecklists>
  );
};

export default YourComponent;
```

<!-- eoContent -->

## Links

- [Storybook Showcase](https://paprika.highbond.com/?path=/story/navigation-collapsiblechecklists--showcase)
- [GitHub source code](https://github.com/acl-services/paprika/tree/master/packages/CollapsibleChecklists/src)
- [Create GitHub issue](https://github.com/acl-services/paprika/issues/new?label=[]&title=@paprika/collapsible-checklists%20[help]:%20your%20short%20description&body=%0A%23%20Help%20wanted%0A%0A%23%23%20Please%20write%20your%20question.%0A*A%20clear%20and%20concise%20description%20of%20what%20the%20question%20is*%0A%0A%23%23%20Additional%20context%0A*Add%20any%20other%20context%20or%20screenshots%20about%20your%20question%20here.*%0A)
- [CHANGELOG](https://github.com/acl-services/paprika/tree/master/packages/CollapsibleChecklists/CHANGELOG.md)