fix(ui): Simple theme checkbox styles

[alexcarpenter]

Description

Fixes an issue in simple theme usage where checkboxes where not preserving their default styles.

BEFORE	AFTER

BEFORE

before.mov

AFTER

after.mov

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jun 18, 2026 8:52pm
swingset	Ready	Preview, Comment	Jun 18, 2026 8:52pm

[changeset-bot]

🦋 Changeset detected

Latest commit: 6c6d9e1

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch
@clerk/swingset	Patch

Not sure what this means? Click here to learn what changesets are.

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

[coderabbitai]

📝 Walkthrough

Walkthrough

Checkbox appearance is fixed for the simple theme by injecting custom CSS into the Input primitive for type=checkbox inputs and extracting a checkboxBaseStyles helper in baseTheme.ts. A width: 'fit-content' rule is removed from CheckboxIndicator, and a patch changeset entry is added.

Changes

Checkbox Default Styling

Layer / File(s)	Summary
Checkbox styles in Input primitive and CheckboxIndicator fix packages/ui/src/primitives/Input.tsx, packages/ui/src/elements/FieldControl.tsx	Input base style gains a conditional block for type=checkbox that removes native appearance, sets fixed dimensions, configures background rendering, and defines a :checked SVG state with $primary500 background. borderRadius in the default variant is restricted to checkbox inputs. CheckboxIndicator drops its width: 'fit-content' rule.
checkboxBaseStyles helper extraction in baseTheme packages/ui/src/baseTheme.ts, .changeset/kind-melons-own.md	New checkboxBaseStyles(theme) helper centralizes checkbox layout and :checked appearance. clerkTheme.elements.checkbox is refactored to spread this helper while keeping neutral shadow styling and a borderColor: $transparent override. Patch changeset entry added for @clerk/ui.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

ui

Suggested reviewers

• kylemac

Poem

🐇 A checkbox once plain, now styled with care,
SVG checkmarks floating in the air,
No fit-content width to cause a fuss,
The simple theme now renders right for us!
Hop hop hooray for cleaner style—
This little patch is worth the while! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately describes the main change: fixing checkbox styling in the simple theme for the UI package.
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.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@8922

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@8922

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@8922

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@8922

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@8922

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@8922

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@8922

@clerk/express

npm i https://pkg.pr.new/@clerk/express@8922

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@8922

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8922

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@8922

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@8922

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@8922

@clerk/react

npm i https://pkg.pr.new/@clerk/react@8922

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@8922

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@8922

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@8922

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@8922

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@8922

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@8922

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@8922

commit: 6c6d9e1

[github-actions]

API Changes Report

Generated by Break Check on 2026-06-18T20:56:02.377Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

---

Report generated by Break Check

_{Last ran on 6c6d9e1.}

[coderabbitai]

Actionable comments posted: 1

🤖 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/ui/src/primitives/Input.tsx`:
- Around line 30-33: The theme.colors.$white value is being interpolated
unescaped into the SVG data URI within the checked state styles in the Input.tsx
file. If this color resolves to a hex value like `#fff`, the # character will
break the URI syntax. URL-encode the theme.colors.$white interpolation before
inserting it into the data URI string using appropriate URL encoding (e.g.,
encodeURIComponent) to ensure special characters like # are properly escaped.
Apply the same URL-encoding fix to the corresponding color interpolation in
baseTheme.ts where similar SVG data URIs are defined.

🪄 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: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: b4511a5f-26bb-4844-b752-2d6440bbfe0c

📥 Commits

Reviewing files that changed from the base of the PR and between 15b059c and 6c6d9e1.

📒 Files selected for processing (4)

• .changeset/kind-melons-own.md
• packages/ui/src/baseTheme.ts
• packages/ui/src/elements/FieldControl.tsx
• packages/ui/src/primitives/Input.tsx

💤 Files with no reviewable changes (1)

• packages/ui/src/elements/FieldControl.tsx

[dmoerner]

👍 Thank you!