fix: standardize disabled cursor to not-allowed across form components

[rohanchkrabrty]

Summary

• Standardize the disabled-state cursor to not-allowed across all form components and buttons (button, icon-button, checkbox, radio, switch, input, text-area, select, combobox, number-field, search, toggle, color-picker).
• Replace the inconsistent cursor: default on button and icon-button disabled states with not-allowed.
• For checkbox, drop pointer-events: none so the not-allowed cursor actually renders, and guard the base :hover rule with :not([data-disabled]) so disabled checkboxes no longer pick up hover styling (interaction stays blocked via the native disabled attribute).
• Leave read-only states (checkbox/otp-field [data-readonly]) as cursor: default, since read-only is distinct from disabled.

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
apsara	Ready	Preview, Comment	Jun 1, 2026 7:07am

[coderabbitai]

📝 Walkthrough

Walkthrough

This pull request standardizes disabled-state cursor feedback across the Raystack component library by replacing cursor: default with cursor: not-allowed in 12 components. The changes apply to button variants, form controls (input, number-field, textarea, search), selection controls (radio, checkbox), and toggle/switch components. Additionally, the checkbox component's interaction is refined to prevent hover styles when disabled and removes pointer-events blocking while maintaining visual opacity changes.

Suggested reviewers

• rsbh
• paanSinghCoder

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly and concisely summarizes the main change: standardizing the disabled cursor to 'not-allowed' across form components, which is the primary objective of the changeset.
Description check	✅ Passed	The description is directly related to the changeset and provides relevant context about the standardization of disabled cursors, removal of pointer-events, and preservation of read-only states.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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.}

[coderabbitai]

Actionable comments posted: 1

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

packages/raystack/components/number-field/number-field.module.css (1)

41-46: ⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

pointer-events: none can suppress the new disabled cursor feedback

On Line 43 and Line 67, pointer-events: none may prevent the not-allowed cursor (Line 45/69) from being shown on these controls, which weakens this PR’s consistency goal.

Suggested adjustment

 .decrement[data-disabled],
 .increment[data-disabled] {
-  pointer-events: none;
   opacity: 0.5;
   cursor: not-allowed;
 }

 .input[data-disabled] {
-  pointer-events: none;
   opacity: 0.5;
   cursor: not-allowed;
 }

Also applies to: 66-70

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/raystack/components/number-field/number-field.module.css` around
lines 41 - 46, The CSS rule for the disabled controls
(.decrement[data-disabled], .increment[data-disabled]) currently uses
pointer-events: none which prevents the not-allowed cursor from appearing;
remove pointer-events: none from those selectors and keep opacity: 0.5 and
cursor: not-allowed so the disabled cursor is visible, and enforce the disabled
behavior in the component logic instead by short-circuiting the click/press
handlers (check the element’s data-disabled attribute in your
increment/decrement handlers such as the component methods that handle
onClick/onPointerDown) to ignore events when disabled.

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/raystack/components/toggle/toggle.module.css`:
- Around line 36-40: The CSS rule .toggle[data-disabled] sets pointer-events:
none which prevents the not-allowed cursor from showing; remove the
pointer-events: none declaration from .toggle[data-disabled] (and the identical
rule around lines 96-100) so the cursor: not-allowed is visible while keeping
opacity: 0.5, and ensure event/behavior-level guards in the Toggle component
(event handlers that check dataset/props disabled state) prevent interactions
instead of relying on pointer-events.

---

Outside diff comments:
In `@packages/raystack/components/number-field/number-field.module.css`:
- Around line 41-46: The CSS rule for the disabled controls
(.decrement[data-disabled], .increment[data-disabled]) currently uses
pointer-events: none which prevents the not-allowed cursor from appearing;
remove pointer-events: none from those selectors and keep opacity: 0.5 and
cursor: not-allowed so the disabled cursor is visible, and enforce the disabled
behavior in the component logic instead by short-circuiting the click/press
handlers (check the element’s data-disabled attribute in your
increment/decrement handlers such as the component methods that handle
onClick/onPointerDown) to ignore events when disabled.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5b5d830c-8df2-4e3f-878b-a04e8b243781

📥 Commits

Reviewing files that changed from the base of the PR and between 1cfaeab and 8d3b298.

📒 Files selected for processing (10)

• packages/raystack/components/button/button.module.css
• packages/raystack/components/checkbox/checkbox.module.css
• packages/raystack/components/icon-button/icon-button.module.css
• packages/raystack/components/input/input.module.css
• packages/raystack/components/number-field/number-field.module.css
• packages/raystack/components/radio/radio.module.css
• packages/raystack/components/search/search.module.css
• packages/raystack/components/switch/switch.module.css
• packages/raystack/components/text-area/text-area.module.css
• packages/raystack/components/toggle/toggle.module.css

[coderabbitai]

⚠️ Potential issue | 🟡 Minor | ⚡ Quick win

cursor: not-allowed won’t take effect while pointer-events: none is set.

With pointer-events: none, these elements won’t receive hover hit-testing, so the new cursor style is effectively bypassed. If the goal is visible disabled cursor feedback, remove pointer-events: none here and rely on disabled-state guards in behavior/event handling.

Also applies to: 96-100

🤖 Prompt for AI Agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@packages/raystack/components/toggle/toggle.module.css` around lines 36 - 40,
The CSS rule .toggle[data-disabled] sets pointer-events: none which prevents the
not-allowed cursor from showing; remove the pointer-events: none declaration
from .toggle[data-disabled] (and the identical rule around lines 96-100) so the
cursor: not-allowed is visible while keeping opacity: 0.5, and ensure
event/behavior-level guards in the Toggle component (event handlers that check
dataset/props disabled state) prevent interactions instead of relying on
pointer-events.