fix: settings toggle should use input #1049

abbeyperini · 2026-02-05T22:03:10Z

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 · 2026-02-05T22:03:15Z

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

Project	Deployment	Actions	Updated (UTC)
npmx.dev	Ready	Preview, Comment	Feb 11, 2026 5:51pm

2 Skipped Deployments

Project	Deployment	Actions	Updated (UTC)
docs.npmx.dev	Ignored	Preview	Feb 11, 2026 5:51pm
npmx-lunaria	Ignored		Feb 11, 2026 5:51pm

codecov · 2026-02-05T22:06:14Z

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

app/components/Settings/Toggle.client.vue

coderabbitai · 2026-02-10T23:47:38Z

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

Tip

Issue Planner is now in beta. Read the docs and try it out! Share your feedback on Discord.

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

coderabbitai

Actionable comments posted: 1

app/components/Settings/Toggle.client.vue

coderabbitai

Actionable comments posted: 1

app/components/Settings/Toggle.client.vue

danielroe · 2026-02-11T00:02:50Z

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.

knowler · 2026-02-10T23:58:26Z

app/components/Settings/Toggle.client.vue

-@media (forced-colors: active) {
-  /* make toggle tracks and thumb visible in forced colors. */
-  button[role='switch'] {
-    & > span:last-of-type {
-      forced-color-adjust: none;
-    }
-
-    &[aria-checked='false'] > span:last-of-type {
-      background: Canvas;
-      border-color: CanvasText;
-
-      & > span {
-        background: CanvasText;
-      }
-    }
-
-    &[aria-checked='true'] > span:last-of-type {
-      background: Highlight;
-      border-color: Highlight;
-
-      & > span {
-        background: HighlightText;
-      }
-    }
-  }
+.toggle--checkbox:checked.rtl + .toggle--background:before {
+  transform: translate(-17px);
 }


I imagine this might have gotten dropped when merging as I believe it was added after you started your PR. Can we incorporate it somehow? If you don’t have Windows, you can emulate forced colours in Chrome devtools.

Has it not been incorporated into the theme in main.css? We should also add it to the tests since we're already doing dark and light mode

Has it not been incorporated into the theme in main.css?

It probably should be, but it isn’t right now (there are some forced colours styles there, but they don’t apply to this).

I see @media (prefers-contrast: more) for some styles, but that doesn’t apply for forced colours unfortunately. Why don’t we create a separate PR for that and we can ignore here.

Oh yeah, I was suggesting issues, not volunteering lol

Found a bug - in high contrast mode, the label isn't showing 1/2 the time. I'll fix that when I finish these styles in the morning.

Screen.Recording.2026-02-10.at.8.10.55.PM.mov

Ok the latest commit should fix forced contrast styles. I will accept style tag to inline utility class translations if you've got them.

Screen.Recording.2026-02-11.at.12.49.29.PM.mov

Also, my friend made this excellent Color Blind & Low Vision Simulator Chrome Extension

Did a quick test with Windows High Contrast Mode (Night sky theme) and Edge on Windows 11 and this is what I found:

Looks like the label disappears when its enabled.

There’s also a slight flicker for the “thumb” when it changes colour.

When enabled the background and text colour is probably failing the minimum contrast ratio.

npmx-switch-forced-colors-win11-edge.mp4

Worth noting that when using a light contrast theme (e.g. “Desert”) these issues aren’t present, but I might still avoid the label colour inversion:

app/components/Settings/Toggle.client.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>

knowler

Sorry, one last set of changes all related to the transitions.

app/components/Settings/Toggle.client.vue

Co-authored-by: Nathan Knowler <nathan@knowler.dev>

coderabbitai

Actionable comments posted: 1

🧹 Nitpick comments (2)

app/components/Settings/Toggle.client.vue (2)
7-7: Redundant defineEmits when using defineModel.

defineModel internally handles the update:modelValue emit, so the explicit defineEmits declaration is unnecessary and can be removed to reduce noise.
♻️ Suggested change
-defineEmits(['update:modelValue'])
2-6: Unused class prop.

The class prop is defined but never applied in the template. When explicitly declared as a prop, Vue disables automatic class fallthrough, so any class passed by consumers will have no effect. Either remove the prop or apply it to the appropriate element (likely the outer <label>).
♻️ Option A: Apply the class prop
 <template>
-  <label :for="id">
+  <label :for="id" :class="props.class">
♻️ Option B: Remove unused prop
 const props = defineProps<{
   label: string
   description?: string
-  class?: string
 }>()

app/components/Settings/Toggle.client.vue

knowler

Looks good to me! As usual, I’ll defer to others with regard to Vue related stuff.

I will follow up with the forced colors mode stuff at the theme-level.

app/components/Settings/Toggle.client.vue

…, update server component

# Conflicts: # app/components/Settings/Toggle.client.vue

coderabbitai

Actionable comments posted: 2

app/components/Settings/Toggle.client.vue

fix: settings toggle should use input

c498289

vercel bot deployed to Preview – npmx.dev February 5, 2026 22:05 View deployment

knowler reviewed Feb 7, 2026

View reviewed changes

app/components/Settings/Toggle.client.vue Outdated Show resolved Hide resolved

app/components/Settings/Toggle.client.vue Outdated Show resolved Hide resolved

app/components/Settings/Toggle.client.vue Outdated Show resolved Hide resolved

fixes: animation, reacty code, and styling

439a09e

vercel bot deployed to Preview – npmx.dev February 9, 2026 23:51 View deployment

fix: support rtl

a6a084f

vercel bot deployed to Preview – npmx.dev February 10, 2026 22:52 View deployment

abbeyperini and others added 2 commits February 10, 2026 18:28

Fix: use theme colors, toggle size

0db4fda

Merge branch 'main' into fix/1028

52963f3

vercel bot deployed to Preview – docs.npmx.dev February 10, 2026 23:31 View deployment

vercel bot deployed to Preview – npmx.dev February 10, 2026 23:31 View deployment

fix: unneeded code, tests

19c31f2

vercel bot deployed to Preview – npmx.dev February 10, 2026 23:38 View deployment

abbeyperini marked this pull request as ready for review February 10, 2026 23:40

coderabbitai bot reviewed Feb 10, 2026

View reviewed changes

app/components/Settings/Toggle.client.vue Outdated Show resolved Hide resolved

abbeyperini and others added 2 commits February 10, 2026 18:50

fix: use useID instead of adding label to "toggle"

4bcbce9

Merge branch 'main' into fix/1028

98e4265

vercel bot deployed to Preview – npmx.dev February 10, 2026 23:53 View deployment

coderabbitai bot reviewed Feb 10, 2026

View reviewed changes

app/components/Settings/Toggle.client.vue Outdated Show resolved Hide resolved

fix: dot position

bac8f7b

knowler reviewed Feb 11, 2026

View reviewed changes

abbeyperini and others added 5 commits February 10, 2026 19:15

Update app/components/Settings/Toggle.client.vue

4182e9f

Co-authored-by: Nathan Knowler <nathan@knowler.dev>

Update app/components/Settings/Toggle.client.vue

6528caa

Co-authored-by: Nathan Knowler <nathan@knowler.dev>

Update app/components/Settings/Toggle.client.vue

e82dccd

Co-authored-by: Nathan Knowler <nathan@knowler.dev>

Update app/components/Settings/Toggle.client.vue

a36bd55

Co-authored-by: Nathan Knowler <nathan@knowler.dev>

Update app/components/Settings/Toggle.client.vue

ef96b93

Co-authored-by: Nathan Knowler <nathan@knowler.dev>

Update app/components/Settings/Toggle.client.vue

e1887e2

Co-authored-by: Nathan Knowler <nathan@knowler.dev>

vercel bot deployed to Preview – npmx.dev February 11, 2026 00:20 View deployment

fix: css instead of js for dir, unneeded code

177d4cc

vercel bot deployed to Preview – npmx.dev February 11, 2026 00:32 View deployment

knowler reviewed Feb 11, 2026

View reviewed changes

app/components/Settings/Toggle.client.vue Outdated Show resolved Hide resolved

app/components/Settings/Toggle.client.vue Outdated Show resolved Hide resolved

app/components/Settings/Toggle.client.vue Show resolved Hide resolved

abbeyperini and others added 2 commits February 10, 2026 20:08

Update app/components/Settings/Toggle.client.vue

9d39717

Co-authored-by: Nathan Knowler <nathan@knowler.dev>

Update app/components/Settings/Toggle.client.vue

d02f011

Co-authored-by: Nathan Knowler <nathan@knowler.dev>

vercel bot deployed to Preview – npmx.dev February 11, 2026 01:10 View deployment

coderabbitai bot reviewed Feb 11, 2026

View reviewed changes

app/components/Settings/Toggle.client.vue Outdated Show resolved Hide resolved

knowler approved these changes Feb 11, 2026

View reviewed changes

danielroe reviewed Feb 11, 2026

View reviewed changes

app/components/Settings/Toggle.client.vue Outdated Show resolved Hide resolved

danielroe and others added 4 commits February 11, 2026 01:37

chore: clean up slightly

cfed8ca

chore: move into atomic css, respect prefers-reduced-motion: reduce…

96afb3c

…, update server component

Merge remote-tracking branch 'origin/main' into fix/1028

e0836ba

# Conflicts: # app/components/Settings/Toggle.client.vue

[autofix.ci] apply automated fixes

383cfc0

vercel bot deployed to Preview – npmx.dev February 11, 2026 02:01 View deployment

danielroe added 2 commits February 11, 2026 02:05

chore: remove class prop

ee9b8d5

chore: update server equivalent following merge

ea8723f

coderabbitai bot reviewed Feb 11, 2026

View reviewed changes

app/components/Settings/Toggle.client.vue Show resolved Hide resolved

app/components/Settings/Toggle.client.vue Outdated Show resolved Hide resolved

vercel bot deployed to Preview – npmx.dev February 11, 2026 02:08 View deployment

ghostdevv requested a review from danielroe February 11, 2026 03:55

knowler reviewed Feb 11, 2026

View reviewed changes

app/components/Settings/Toggle.client.vue Outdated Show resolved Hide resolved

refactor: rewrite without extra element

4bf2934

vercel bot deployed to Preview – npmx.dev February 11, 2026 08:43 View deployment

chore: remove cursor-pointer

ab07136

vercel bot deployed to Preview – npmx.dev February 11, 2026 08:58 View deployment

fix: forced contrast mode styling, server style tag

837bc10

vercel bot deployed to Preview – npmx.dev February 11, 2026 17:45 View deployment

fix: forced contrast colors are hard

61a0040

vercel bot deployed to Preview – npmx.dev February 11, 2026 17:51 View deployment

Uh oh!

fix: settings toggle should use input #1049

Are you sure you want to change the base?

fix: settings toggle should use input #1049

Conversation

abbeyperini commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 5, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

knowler left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Reviews paused

Walkthrough

Possibly related PRs

Suggested reviewers

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

danielroe commented Feb 11, 2026

Uh oh!

knowler left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

knowler Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

abbeyperini Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

knowler left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

coderabbitai bot left a comment

abbeyperini commented Feb 5, 2026 •

edited

Loading

vercel bot commented Feb 5, 2026 •

edited

Loading

codecov bot commented Feb 5, 2026 •

edited

Loading

coderabbitai bot commented Feb 10, 2026 •

edited

Loading

knowler Feb 11, 2026 •

edited

Loading

abbeyperini Feb 11, 2026 •

edited

Loading

knowler left a comment •

edited

Loading