feat(checkbox) : add checkbox component with all interaction states

[ShobhitPatra]

📝 Description

Implement complete checkbox component with all interaction states including hover, pressed, focus, error, and disabled states. Added proper CSS styling and React Aria state management integration

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

[changeset-bot]

⚠️ No Changeset found

Latest commit: c80dd1a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[vercel]

@ShobhitPatra is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

✨ Finishing touches

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[Copilot]

Pull Request Overview

This PR implements a complete checkbox component with comprehensive interaction states including hover, pressed, focus, error, and disabled states. The implementation moves styling from Tailwind variants to CSS classes and integrates React Aria state management.

• Adds full CSS styling for all checkbox interaction states (hover, pressed, focus, error, disabled)
• Updates React component to properly expose and use interaction state data attributes
• Refactors stories to use CSS classes instead of data attributes for visual state demonstration

Reviewed Changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/styles/components/index.css	Imports the new checkbox CSS file
packages/styles/components/checkbox.css	Complete CSS implementation for all checkbox states
packages/react/src/components/checkbox/checkbox.tsx	Updates context and component to expose interaction states via data attributes
packages/react/src/components/checkbox/checkbox.styles.ts	Simplifies styles to use CSS classes instead of Tailwind variants
packages/react/src/components/checkbox/checkbox.stories.tsx	Updates story examples and title
packages/react/src/components/checkbox/checkbox-group.stories.tsx	Updates story title

---

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

[Copilot]

The CSS class bg-surface-3 is being used but this doesn't match the original Tailwind class bg-default from the styles file. This could cause visual inconsistencies.

Suggested change

	@apply bg-surface-3 border-border/10 border;
	@apply bg-default border-border/10 border;

[ShobhitPatra]

@jrgarciadev I think bg-surface-3 works better.Though, happy to make any changes .

bg-default

bg-surface-3

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Sep 17, 2025 11:05pm

[jrgarciadev]

Hey @ShobhitPatra thanks!, did you follow the Figma design? https://www.figma.com/community/file/1546526812159103429/heroui-figma-kit-v3 I see a lot of differences

[ShobhitPatra]

Hi @jrgarciadev, thanks for the feedback! I want to make sure I get this right.

Could you help me understand specifically what differs from the Figma design? I've been working from the checkbox states shown in the kit, but I'm clearly missing something important.

I'd rather ask for guidance now than continue in the wrong direction. Thanks for your patience!