From 3178da7f4d4a2e2e960ef6fef2fb14aff3332366 Mon Sep 17 00:00:00 2001
From: Miranda Limonczenko <miranda.limonczenko@supabase.io>
Date: Mon, 24 Aug 2026 09:17:26 -0700
Subject: [PATCH] fix(ui): give enabled checkboxes a pointer cursor (#49408)

Closes FE-4249

## Problem

The `Checkbox` primitive sets `disabled:cursor-not-allowed` but never
sets a base cursor. It renders a Radix `button`, and a UA `button {
cursor: default }` rule beats an inherited value from any parent, so an
enabled checkbox shows an arrow while being clickable. The `disabled:`
variant only makes sense if a base cursor exists.

A parent cannot fix this. `/features` tried `cursor-pointer!` on a
wrapper `div` with a sibling checkbox and label. Measured:

| Element | Computed cursor |
| -- | -- |
| wrapper `div` | `pointer` |
| `label` | `default` |
| checkbox `button` | `default` |

A declaration targeting an element always beats an inherited value, so
`!important` on the parent changed nothing. Only the bare gap between
the two children showed a pointer.

## Solution

Add the base `cursor-pointer` that the existing `disabled:` variant
already implied.

Split out of #49346 so this shared-package change gets reviewed on its
own. It affects www, Docs and Studio.

## Manual testing

**www**

1. Open
[/features](https://zone-www-dot-com-git-ui-checkbox-pointer-cursor-supabase.vercel.app/features).
2. Hover any filter checkbox in the left sidebar. The cursor is a
pointer.

**Studio**, since this is a shared primitive. Needs Vercel SSO and a
logged-in account.

3. Open the [Studio
preview](https://studio-staging-git-ui-checkbox-pointer-cursor-supabase.vercel.app)
and pick any project.
4. Go to Table Editor and click the funnel icon in the left sidebar.
5. Hover the checkboxes in the "Filter entity types" popover. Each shows
a pointer.

**Disabled state**, which this PR must not change.

6. In devtools, add `disabled` to any checkbox. The cursor becomes
`not-allowed`.

**Docs has nothing to check.** `apps/docs` contains no `Checkbox` usage.
A runtime sweep found zero checkboxes on the troubleshooting page with
its Products filter open, and on `/docs`,
`/docs/guides/database/overview` and `/docs/guides/auth`. Its
[preview](https://docs-git-ui-checkbox-pointer-cursor-supabase.vercel.app/docs)
builds only because `packages/ui` is a dependency.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->

## Summary by CodeRabbit

* **Style**
* Updated checkbox controls to display a pointer cursor, making them
feel clickable.

<!-- end of auto-generated comment: release notes by coderabbit.ai -->

Co-authored-by: Claude Opus 5 <noreply@anthropic.com>
---
 packages/ui/src/components/shadcn/ui/checkbox.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/shadcn/ui/checkbox.tsx b/packages/ui/src/components/shadcn/ui/checkbox.tsx
index 7b6ff62b280..38221880020 100644
--- a/packages/ui/src/components/shadcn/ui/checkbox.tsx
+++ b/packages/ui/src/components/shadcn/ui/checkbox.tsx
@@ -17,7 +17,7 @@ const Checkbox = React.forwardRef<
     <CheckboxPrimitive.Root
       ref={ref}
       className={cn(
-        'peer flex items-center justify-center h-4 w-4 shrink-0 rounded-sm border border-control bg-control/25 ring-offset-background',
+        'peer flex cursor-pointer items-center justify-center h-4 w-4 shrink-0 rounded-sm border border-control bg-control/25 ring-offset-background',
         'transition-colors duration-150 ease-in-out',
         'hover:border-strong',
         'focus-ring',