A customizable checklist component that supports grouped categories of items.
npm install tailwind-categorized-checklistA customizable checklist component that supports grouped categories of items.
> ⚠️ 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.
To use this component library with Tailwind, add the following to your tailwind.config.js:
``js`
module.exports = {
content: [
"./src/*/.{js,jsx,ts,tsx}",
"./node_modules/tailwind-categorized-checklist/*/.{js,jsx}",
],
// other config...
};
---
The categoryList prop should follow a recursive Record format, allowing unlimited levels of nesting.
`ts`
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"],
},
};
`ts`
type CategoryList = {
[category: string]: CategoryList | string[];
};
---
| Prop Name | Type | Required | Default | Description |
| ----------------------- | -------------------------- | -------- | ----------- | ---------------------------------------------------------------------------- |
| categoryList | Record | ✅ | — | 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. |