{"id":31755263,"url":"https://github.com/shakibdshy/react-checkbox-pro","last_synced_at":"2026-07-18T21:05:26.441Z","repository":{"id":271112187,"uuid":"911730890","full_name":"shakibdshy/react-checkbox-pro","owner":"shakibdshy","description":"A flexible and feature-rich checkbox component for React applications with TailwindCSS support.","archived":false,"fork":false,"pushed_at":"2025-02-12T08:14:40.000Z","size":441,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-08-28T06:04:45.988Z","etag":null,"topics":["checkbox","checkbox-component","checkbox-group","checkboxlist","custom","custom-icon-with-checkbox","headless-checkbox","react-checkbox","tailwind-checkbox"],"latest_commit_sha":null,"homepage":"https://react-packages-doc.vercel.app/docs/react-checkbox-pro","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/shakibdshy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-01-03T17:56:28.000Z","updated_at":"2025-02-11T18:02:34.000Z","dependencies_parsed_at":"2025-01-05T16:20:23.562Z","dependency_job_id":"ef250cb7-73a0-4d64-80a0-631d75988d08","html_url":"https://github.com/shakibdshy/react-checkbox-pro","commit_stats":null,"previous_names":["shakibdshy/react-checkbox-pro"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/shakibdshy/react-checkbox-pro","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibdshy%2Freact-checkbox-pro","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibdshy%2Freact-checkbox-pro/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibdshy%2Freact-checkbox-pro/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibdshy%2Freact-checkbox-pro/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/shakibdshy","download_url":"https://codeload.github.com/shakibdshy/react-checkbox-pro/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/shakibdshy%2Freact-checkbox-pro/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279001895,"owners_count":26083226,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-09T02:00:07.460Z","response_time":59,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["checkbox","checkbox-component","checkbox-group","checkboxlist","custom","custom-icon-with-checkbox","headless-checkbox","react-checkbox","tailwind-checkbox"],"created_at":"2025-10-09T18:41:37.497Z","updated_at":"2025-10-09T18:41:38.517Z","avatar_url":"https://github.com/shakibdshy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Checkbox Pro\n\nA fully accessible, customizable React checkbox component with indeterminate state support, keyboard shortcuts, and modern styling.\n\n[![npm version](https://img.shields.io/npm/v/react-checkbox-pro.svg)](https://www.npmjs.com/package/react-checkbox-pro)\n[![npm downloads](https://img.shields.io/npm/dm/react-checkbox-pro.svg)](https://www.npmjs.com/package/react-checkbox-pro)\n[![License](https://img.shields.io/npm/l/react-checkbox-pro.svg)](https://github.com/yourusername/react-checkbox-pro/blob/main/LICENSE)\n\n## 📚 Demo \u0026 Documentation\n\n[Documentation](https://react-packages-doc.vercel.app/)\n\n## Features\n\n### Core Features\n- ✨ Modern, lightweight checkbox component\n- 🔄 Controlled \u0026 Uncontrolled modes support\n- 👥 Checkbox group for managing multiple selections\n- 🎯 Indeterminate state support\n- ⌨️ Full keyboard navigation and shortcuts\n- 🎨 CSS-in-JS with Tailwind variants\n\n### Styling \u0026 Customization\n- 🎭 Custom icons support\n- 🖼️ Built-in check and indeterminate icons\n- 🎨 Multiple built-in color variants\n-    Default, Primary, Secondary, Success, Warning, Danger\n- 📐 Four size variants (xs, sm, md, lg)\n- 🔲 Configurable border radius\n- 📍 Flexible label placement (left, right, top, bottom)\n- 💅 Works with both Tailwind CSS and custom CSS\n- 🎯 Custom styles without breaking accessibility\n- 🎪 Compound variants support\n\n### Accessibility \u0026 UX\n- ♿️ WAI-ARIA 1.2 compliant\n- 🔍 Screen reader friendly\n- 🎯 Focus management and indicators\n- 💬 Support for helper text and error messages\n- 📱 Responsive and touch-friendly\n- 🖱️ Click area optimization\n- 🔄 Smooth transitions\n\n### Developer Experience\n- 📝 Written in TypeScript with full type definitions\n- 🏃‍♂️ Tree-shakeable and optimized bundle\n- 📚 Comprehensive documentation and examples\n- 🧪 Reliable with proper error handling\n- 🔧 Easy to integrate and customize\n- 🎁 Zero external runtime dependencies\n- 📦 Small bundle size\n- 🔍 Source maps included\n\n### Advanced Features\n- 🔑 Keyboard shortcuts customization\n- 🎛️ Form integration support\n- 🔄 Async state management\n- 🎨 Theme customization support\n- 🔒 Disabled and readonly states\n- 📊 Group selection management\n- 🎯 Compound variants for complex styling\n- 🎨 CSS variables support\n- 🔄 State persistence options\n- 🎨 Custom styles without breaking accessibility\n## Installation\n\n```bash\nnpm install react-checkbox-pro\n# or\nyarn add react-checkbox-pro\n# or\npnpm add react-checkbox-pro\n```\n\n## Usage\n\nAdd the plugin to your `tailwind.config.js`:\n\n```js\nmodule.exports = {\n  content: [\n    \"./src/**/*.{js,ts,jsx,tsx}\",\n    \"./node_modules/@shakibdshy/tailwind-theme/dist/**/*.{js,ts,jsx,tsx,mdx}\",\n  ],\n  plugins: [\n    require('@shakibdshy/tailwind-theme')\n  ],\n}\n```\n\n## Quick Start\n\n```jsx\nimport { Checkbox } from 'react-checkbox-pro';\n\nfunction App() {\n  return (\n    \u003cCheckbox defaultChecked\u003e\n      Click me\n    \u003c/Checkbox\u003e\n  );\n}\n```\n\n### Color Variants\n\n```jsx\n\u003cCheckbox color=\"default\"\u003eDefault\u003c/Checkbox\u003e\n\u003cCheckbox color=\"primary\"\u003ePrimary\u003c/Checkbox\u003e\n\u003cCheckbox color=\"secondary\"\u003eSecondary\u003c/Checkbox\u003e\n\u003cCheckbox color=\"success\"\u003eSuccess\u003c/Checkbox\u003e\n\u003cCheckbox color=\"warning\"\u003eWarning\u003c/Checkbox\u003e\n\u003cCheckbox color=\"danger\"\u003eDanger\u003c/Checkbox\u003e\n```\n\n### Size Variants\n\n```jsx\n\u003cCheckbox size=\"xs\"\u003eExtra Small\u003c/Checkbox\u003e\n\u003cCheckbox size=\"sm\"\u003eSmall\u003c/Checkbox\u003e\n\u003cCheckbox size=\"md\"\u003eMedium\u003c/Checkbox\u003e\n\u003cCheckbox size=\"lg\"\u003eLarge\u003c/Checkbox\u003e\n```\n\n### Label Placement\n\n```jsx\n\u003cCheckbox labelPlacement=\"left\"\u003eLeft Label\u003c/Checkbox\u003e\n\u003cCheckbox labelPlacement=\"right\"\u003eRight Label\u003c/Checkbox\u003e\n\u003cCheckbox labelPlacement=\"top\"\u003eTop Label\u003c/Checkbox\u003e\n\u003cCheckbox labelPlacement=\"bottom\"\u003eBottom Label\u003c/Checkbox\u003e\n```\n\n### With Error State\n\n```jsx\n\u003cCheckbox\n  error={true}\n  errorMessage=\"This field is required\"\n  required\n\u003e\n  Accept terms and conditions\n\u003c/Checkbox\u003e\n```\n\n### Controlled and Uncontrolled\n\n```jsx\n// Controlled\nconst [checked, setChecked] = useState(false);\n\n\u003cCheckbox\n  checked={checked}\n  onChange={setChecked}\n  helperText=\"Optional helper text\"\n\u003e\n  Accept terms and conditions\n\u003c/Checkbox\u003e\n\n// Uncontrolled\n\u003cCheckbox\n  defaultChecked\n  onChange={(checked) =\u003e console.log(checked)}\n\u003e\n  Remember me\n\u003c/Checkbox\u003e\n```\n\n### With Keyboard Shortcuts\n\n```jsx\n\u003cCheckbox\n  shortcut=\"ctrl+1\"\n  onShortcut={() =\u003e console.log('Shortcut triggered')}\n\u003e\n  Toggle with Ctrl+1\n\u003c/Checkbox\u003e\n```\n\n### Checkbox Group\n\n```jsx\nfunction App() {\n  const [selected, setSelected] = useState(['apple']);\n\n  return (\n    \u003cCheckboxGroup\n      value={selected}\n      onChange={setSelected}\n      orientation=\"vertical\"\n    \u003e\n      \u003cCheckbox value=\"apple\"\u003eApple\u003c/Checkbox\u003e\n      \u003cCheckbox value=\"banana\"\u003eBanana\u003c/Checkbox\u003e\n      \u003cCheckbox value=\"orange\"\u003eOrange\u003c/Checkbox\u003e\n    \u003c/CheckboxGroup\u003e\n  );\n}\n```\n\n### Indeterminate State Example\n\n```jsx\nfunction TodoList() {\n  const [todos, setTodos] = useState([\n    { id: 1, title: \"Task 1\", completed: false },\n    { id: 2, title: \"Task 2\", completed: false },\n  ]);\n\n  const allSelected = todos.every((todo) =\u003e todo.completed);\n  const someSelected = todos.some((todo) =\u003e todo.completed);\n  const isIndeterminate = someSelected \u0026\u0026 !allSelected;\n\n  const handleParentChange = (checked) =\u003e {\n    setTodos((prev) =\u003e prev.map((todo) =\u003e ({\n      ...todo,\n      completed: checked,\n    })));\n  };\n\n  return (\n    \u003cdiv\u003e\n      \u003cCheckbox\n        checked={allSelected}\n        indeterminate={isIndeterminate}\n        onChange={handleParentChange}\n      \u003e\n        Select All\n      \u003c/Checkbox\u003e\n      \n      {todos.map((todo) =\u003e (\n        \u003cCheckbox\n          key={todo.id}\n          checked={todo.completed}\n          onChange={(checked) =\u003e handleTodoChange(todo.id, checked)}\n        \u003e\n          {todo.title}\n        \u003c/Checkbox\u003e\n      ))}\n    \u003c/div\u003e\n  );\n}\n```\n\n### Custom Icons\n\n```jsx\nimport { CircleIcon, CheckIcon } from './icons';\n\n\u003cCheckbox\n  icon={\u003cCircleIcon /\u003e}\n  checkedIcon={\u003cCheckIcon /\u003e}\n\u003e\n  Custom Icons\n\u003c/Checkbox\u003e\n```\n\n## Props\n\n### Checkbox Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `checked` | `boolean` | `undefined` | Controlled checked state |\n| `defaultChecked` | `boolean` | `false` | Default checked state for uncontrolled component |\n| `onChange` | `(checked: boolean) =\u003e void` \\| `(event: ChangeEvent) =\u003e void` | `undefined` | Change handler |\n| `disabled` | `boolean` | `false` | Whether the checkbox is disabled |\n| `required` | `boolean` | `false` | Whether the checkbox is required |\n| `error` | `boolean` | `false` | Whether to show error state |\n| `errorMessage` | `string` | `undefined` | Error message to display |\n| `helperText` | `string` | `undefined` | Helper text to display |\n| `indeterminate` | `boolean` | `false` | Whether to show indeterminate state |\n| `size` | `'xs' \\| 'sm' \\| 'md' \\| 'lg'` | `'md'` | Size of the checkbox |\n| `color` | `'default' \\| 'primary' \\| 'secondary' \\| 'success' \\| 'warning' \\| 'danger'` | `'primary'` | Color variant |\n| `radius` | `'none' \\| 'sm' \\| 'md' \\| 'lg' \\| 'full'` | `'md'` | Border radius variant |\n| `labelPlacement` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'right'` | Label placement |\n| `icon` | `ReactNode` | `undefined` | Custom unchecked icon |\n| `checkedIcon` | `ReactNode` | `undefined` | Custom checked icon |\n| `shortcut` | `string` | `undefined` | Keyboard shortcut (e.g., 'ctrl+1') |\n| `onShortcut` | `() =\u003e void` | `undefined` | Shortcut callback |\n\n### CheckboxGroup Props\n\n| Prop | Type | Default | Description |\n|------|------|---------|-------------|\n| `value` | `string[]` | `undefined` | Controlled selected values |\n| `defaultValue` | `string[]` | `[]` | Default selected values |\n| `onChange` | `(values: string[]) =\u003e void` | `undefined` | Change handler |\n| `disabled` | `boolean` | `false` | Disable all checkboxes in group |\n| `orientation` | `'horizontal' \\| 'vertical'` | `'vertical'` | Layout orientation |\n| `spacing` | `'sm' \\| 'md' \\| 'lg'` | `'md'` | Space between checkboxes |\n| `labelPlacement` | `'left' \\| 'right' \\| 'top' \\| 'bottom'` | `'right'` | Label placement for all checkboxes |\n\n## Accessibility\n\nThe component is built with accessibility in mind and follows WAI-ARIA guidelines:\n\n- Proper ARIA attributes (`aria-checked`, `aria-invalid`, etc.)\n- Keyboard navigation support\n- Screen reader friendly\n- Clear focus indicators\n- Proper labeling and descriptions\n\n## Contributing\n\nWe welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.\n\n## License\n\nMIT © [Md Habibur Rahman](https://github.com/shakibdshy)\n\n## Support\n\n- Create an [Issue](https://github.com/shakibdshy/react-checkbox-pro/issues)\n- Follow on [Twitter](https://twitter.com/shakibdshy)\n- Star the repo ⭐️\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakibdshy%2Freact-checkbox-pro","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshakibdshy%2Freact-checkbox-pro","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshakibdshy%2Freact-checkbox-pro/lists"}