ChecklistComponent

A customizable checklist component that supports grouped categories of items.

🛠 Tailwind CSS Setup

⚠️ This component library uses Tailwind CSS utility classes but does not include TailwindCSS by default.
You must have TailwindCSS configured in your own project for styles to apply correctly.

🛠 Tailwind Setup

To use this component library with Tailwind, add the following to your tailwind.config.js:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
    "./node_modules/tailwind-categorized-checklist/**/*.{js,jsx}",
  ],
  // other config...
};

Data Structure

The categoryList prop should follow a recursive Record<string, CategoryList | string[]> format, allowing unlimited levels of nesting.

Example:

const categoryList = {
  Home: {
    "Home Care Data": {
      "Property Data": ["Property Name", "Move in date", "Address"],
    },
    "Home Maintenance Data": {
      Bathroom: ["Install Bathtub", "Install Drainage"],
    },
  },
  "User Content": {
    Images: ["Portraits", "Animals"],
    Videos: ["Short-Form Videos", "Tutorials"],
  },
};

Category Type

type CategoryList = {
  [category: string]: CategoryList | string[];
};

Props

| Prop Name | Type | Required | Default | Description | | ----------------------- | -------------------------- | -------- | ----------- | ---------------------------------------------------------------------------- | | categoryList | Record<string, string[]> | ✅ | — | The nested structure of categories and items to render in the checklist. | | onSelectionChange | (data: any) => void | ❌ | undefined | Callback fired when selected checklist items change. | | showSelectedItemsList | boolean | ❌ | false | If true, displays a list of selected items separately. | | showCountBadges | boolean | ❌ | false | If true, shows count badges next to categories indicating selection count. |