fix: settings toggle should use input

[abbeyperini]

Update settings page toggle to use an <input type="checkbox" /> instead of a button. Wrap the whole thing in a label and hide the checkbox behind styled toggle, so the click/touch target is pretty huge. Use translate animation and style it to look about the same as before. Use theme color so all color modes are supported. Use locale dir to support right to left languages.

Closes: #1028

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ready	Preview, Comment	Feb 11, 2026 7:37pm
npmx.dev	Ready	Preview, Comment	Feb 11, 2026 7:37pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
npmx-lunaria	Ignored		Feb 11, 2026 7:37pm

[codecov]

Codecov Report

❌ Patch coverage is 58.82353% with 7 lines in your changes missing coverage. Please review.
✅ All tests successful. No failed tests found.

Files with missing lines	Patch %	Lines
app/components/Settings/Toggle.server.vue	55.55%	4 Missing ⚠️
app/components/Settings/Toggle.client.vue	62.50%	2 Missing and 1 partial ⚠️

📢 Thoughts on this report? Let us know!

[knowler]

This is a good change. I noticed these had some affordances I don’t typically associate with switches (i.e. activation on Enter).

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

📝 Walkthrough

Walkthrough

Replaces the button-based Settings Toggle with a label+native input type="checkbox" implementation using v-model. Internal model declaration now uses definedModel<boolean> with required: true and an id is generated for label association. Templates and styles were rewritten to a CSS-grid layout with toggle-default / toggle-reverse classes, a toggle-background element and a moving thumb implemented with pseudo-elements; inputs are visually hidden but retain role="switch" and ARIA sync. Server-side skeleton template was adjusted; tests now mount with an explicit modelValue: false where applicable.

Possibly related PRs

• feat(ui): community version distribution #1245: Modifies app/components/Settings/Toggle.client.vue structure and props — strong overlap with the new label/input structure.
• feat: polish ui and ux on settings page #1026: Changes Toggle component props and template/styling, including moves toward native checkbox/v-model patterns.
• fix: remove border opacity on toggle #1011: Alters the Toggle component’s DOM/CSS state styling and knob/border behaviour which may intersect with the new CSS-grid layout.

Suggested reviewers

• danielroe
• alexdln

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description check	✅ Passed	The pull request description directly aligns with the changeset, detailing the replacement of a button-based toggle with a checkbox-based implementation wrapped in a label, animation styling, theme colour support, and locale direction handling.
Linked Issues check	✅ Passed	The pull request successfully addresses all coding requirements from issue #1028: checkbox input replaces button, label wrapper is implemented, focus behaviour is preserved, a11y tests are updated, and CSS selectors enable richer styling options.
Out of Scope Changes check	✅ Passed	All modifications remain focused on the toggle component refactoring and related test updates specified in issue #1028; no extraneous changes detected.

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

✨ Finishing touches

🧪 Generate unit tests (beta)

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

---

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

[coderabbitai]

Actionable comments posted: 1

[coderabbitai]

Actionable comments posted: 1

[danielroe]

this is a great change!

just one comment: the radii/position of the dot isn't quite right. here's a comparison

before

after

[knowler]

This is looking really good! Works as expected. I’ve got a couple of requests (incorporating the forced color mode styles and using :dir() instead of a class) and a few nits.

I didn’t leave it as a comment, but I also wonder if we should use logical properties for the dimensions (i.e. height, width as block-size, inline-size respectively). Reason being is that grid/flex layout are writing-mode/directionality aware.

[coderabbitai]

Actionable comments posted: 2

[knowler]

Thanks for working through those forced colours styles, @abbeyperini! LGTM!

[github-actions]

Thanks for your first contribution, @abbeyperini! 👏

We'd love to welcome you to the npmx community. Come and say hi on Discord! And once you've joined, visit npmx.wamellow.com to claim the contributor role.