From 90f85148a4583c4d051ee10fc59fbe71dbb50159 Mon Sep 17 00:00:00 2001
From: Wibus <62133302+wibus-wee@users.noreply.github.com>
Date: Thu, 10 Sep 2026 03:34:31 +0000
Subject: [PATCH 1/6] feat(ui): add the @lody/ui choice controls

The field family covered the controls a person types into, while every control
a person picks with still rendered Radix with Tailwind classes the new token
rules define no equivalent for. checkbox.tsx and radio-group.tsx reached for
data-[state=checked]:bg-primary and switch.tsx for bg-switch-track, and primary
is exactly the concept the redesigned system does not have: the rules replace it
with an elevation rung plus ink. Their disabled treatments were 50% where the
rules say 45%, and their focus rings were ring-offset haloes the rules ban and
the desktop shell suppresses anyway. Migrating them one at a time across that
gap would have let each control invent its own checked colour.

Add Checkbox, Radio and Switch to the same field token group rather than opening
one of their own, and settle the state the text controls never had to answer: a
control that holds a value is ink, the label fill under a background mark with
shadow.inkEdge on top, because the rules reserve accent for live state and never
a fill. src/field/well.ts grows box, checked and checkedInvalid beside base and
invalid, so the family still defines its resting, ring and disabled appearance in
one file; the ring is restated for the ink edge because CSS cannot append to a
box-shadow list, which is the same shape Button already uses per variant.

Each renders a real <button> through Base UI's nativeButton rather than the
default <span>. A span does not match :disabled, so the family's one disabled
mechanism would have needed a second copy read from React state; a span is not a
labelable element, so a <label> click would not toggle it; and the repo's tests
already query button[role="switch"]. A disabled control leaves the tab order in
exchange, which is what a disabled <input> in the same family already does.

Radix modelled the mixed checkbox as checked="indeterminate", so every call site
typed the value as boolean | 'indeterminate' and narrowed it back. Base UI has a
separate indeterminate prop, and the two select-all sites now pass both. A mixed
box wears the checked ink with a dash and announces mixed rather than falling
back to a tick it does not hold.

All 33 callers moved onto the primitives and checkbox.tsx, switch.tsx and
radio-group.tsx are deleted with their barrel exports and their three @radix-ui
dependencies. radio-group.tsx had no caller and no barrel export, so Radio and
RadioGroup arrive with none either. Three callers were carrying the old
dimensions or rebuilding the control's appearance and lost those classes;
pointer-events-none and shrink-0 stay, because they are the caller's constraint.

Model: claude-opus-5[1m]

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../feature/2026-09-10-ui-choice-controls.md  | 215 ++++++++++++++++++
 packages/components/package.json              |   3 -
 .../components/ai-gui/message-selection.tsx   |   2 +-
 .../src/components/archive/archive-view.tsx   |  11 +-
 .../src/components/loro-app-sidebar.tsx       |   4 +-
 .../mobile/mobile-about-settings.tsx          |   2 +-
 .../components/mobile/mobile-chat-list.tsx    |   4 +-
 .../mobile/mobile-general-settings.tsx        |   2 +-
 .../mobile/mobile-integrations-settings.tsx   |   2 +-
 .../mobile/mobile-local-project-settings.tsx  |   2 +-
 .../mobile/mobile-project-screen.tsx          |   4 +-
 .../mobile/mobile-project-settings.tsx        |   2 +-
 .../mobile-remove-local-project-sheet.tsx     |   4 +-
 .../mobile/mobile-run-config-sheet.tsx        |   2 +-
 .../sessions/auto-review-menu-item.tsx        |   4 +-
 .../sessions/chat-share-image-dialog.tsx      |   2 +-
 .../sessions/desktop-run-config-menu.tsx      |   2 +-
 .../src/components/settings/about-setting.tsx |   2 +-
 .../components/settings/agent-role-form.tsx   |   2 +-
 .../settings/auto-archive-setting.tsx         |   2 +-
 .../settings/beta-features-setting.tsx        |   2 +-
 .../experimental-features-setting.tsx         |   2 +-
 .../components/settings/general-setting.tsx   |   2 +-
 .../settings/integrations-setting.tsx         |   2 +-
 .../settings/machine-detail-pane.tsx          |   2 +-
 .../settings/mcp-connection-form.tsx          |   2 +-
 .../src/components/settings/mcp-setting.tsx   |   4 +-
 .../my-machine-connected-resources.tsx        |   2 +-
 .../components/settings/project-settings.tsx  |  13 +-
 .../settings/review-policy-setting.tsx        |   2 +-
 .../shared/workdir-mode-selector.tsx          |  10 +-
 .../tasks/task-agent-run-config-menu.tsx      |   2 +-
 .../tasks/task-quick-add-dialog.tsx           |   4 +-
 .../lib/open-source-attributions.generated.ts |  33 ---
 .../components/src/stories/Switch.stories.tsx |   2 +-
 packages/components/src/ui/checkbox.tsx       |  36 ---
 packages/components/src/ui/index.ts           |   2 -
 packages/components/src/ui/radio-group.tsx    |  43 ----
 packages/components/src/ui/switch.tsx         |  27 ---
 .../tests/message-selection.test.tsx          |   8 +-
 packages/ui/AGENTS.md                         |   9 +-
 packages/ui/README.md                         |  19 +-
 packages/ui/package.json                      |   3 +
 packages/ui/src/field/checkbox.tsx            | 101 ++++++++
 packages/ui/src/field/field.tokens.stylex.ts  |  28 +++
 packages/ui/src/field/radio.tsx               |  87 +++++++
 packages/ui/src/field/switch.tsx              |  81 +++++++
 packages/ui/src/field/well.ts                 |  70 ++++--
 packages/ui/src/gallery/gallery.tsx           | 134 +++++++++++
 packages/ui/src/index.ts                      |   6 +
 packages/ui/src/tokens/RULES.md               |  33 ++-
 packages/ui/test/gallery.test.tsx             |  20 ++
 packages/ui/test/toggles.test.tsx             | 192 ++++++++++++++++
 pnpm-lock.yaml                                |  98 --------
 specs/ui-primitives.md                        |  17 +-
 55 files changed, 1035 insertions(+), 336 deletions(-)
 create mode 100644 .agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md
 delete mode 100644 packages/components/src/ui/checkbox.tsx
 delete mode 100644 packages/components/src/ui/radio-group.tsx
 delete mode 100644 packages/components/src/ui/switch.tsx
 create mode 100644 packages/ui/src/field/checkbox.tsx
 create mode 100644 packages/ui/src/field/radio.tsx
 create mode 100644 packages/ui/src/field/switch.tsx
 create mode 100644 packages/ui/test/toggles.test.tsx

diff --git a/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md b/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md
new file mode 100644
index 000000000..9d04b35c6
--- /dev/null
+++ b/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md
@@ -0,0 +1,215 @@
+# UI choice controls: Checkbox, Radio and Switch
+
+Status: implemented
+Translation: pending
+
+## Abstract
+
+The `@lody/ui` field family covered the controls a person types into, while every
+control a person picks with — 9 `Checkbox` call sites and 24 `Switch` ones —
+still rendered Radix with Tailwind classes the new token rules define no
+equivalent for, including a `primary` fill and a `switch-track` colour that are
+not tokens at all. This note records adding `Checkbox`, `Radio` and `Switch` to
+the same `field` token group rather than opening one of their own, and settling
+the state the text controls never had to answer: a control that holds a value is
+ink, the `label` fill under a `background` mark with the primary button's own top
+highlight, because the rules reserve `accent` for live state. Each renders a real
+`<button>` through Base UI's `nativeButton` rather than the default `<span>`, so
+the family's existing `:disabled` and `:focus-visible` rules reach them and a
+`<label>` can point at them; the cost is that the ring has to be restated for the
+ink edge, since CSS cannot append to a box-shadow list. Every caller moved and
+the three Radix files are deleted. The board was read in both palettes; no test
+asserts a rendered appearance, and the switch's on state is ink rather than the
+`accent` the rules mention for a "live switch", which is left for a surface that
+actually has one.
+
+## Problem
+
+`packages/ui` owned the label, Input and Textarea. `packages/components/src/ui`
+still owned `checkbox.tsx`, `switch.tsx` and `radio-group.tsx`, and their
+Tailwind classes reach for a vocabulary the token rules do not have:
+
+- `checkbox.tsx`: `border-input-border`, `data-[state=checked]:bg-primary`,
+  `data-[state=checked]:text-primary-foreground`, `focus-visible:ring-ring/50`,
+  `aria-invalid:ring-destructive/20`, `rounded-[4px]`, `disabled:opacity-50`
+- `switch.tsx`: `data-[state=checked]:bg-primary`,
+  `data-[state=unchecked]:bg-switch-track`, `focus-visible:ring-offset-2`,
+  `disabled:opacity-50`, a 36×20 track with a 16px thumb
+- `radio-group.tsx`: the checkbox's set again, plus `fill-primary`
+
+Three problems compound there. The two disabled treatments are 50%, where the
+rules say 45% and the field family already reads `field.disabledOpacity`. The
+focus rings are `ring-offset` haloes, which the rules ban and which the desktop
+shell suppresses anyway. And `primary` is the concept the new system deliberately
+does not have: the rules replace it with an elevation rung plus ink, and a
+migrated control that kept reaching for it would carry the old design forward
+under a new import path.
+
+`radio-group.tsx` had no caller at all and was not exported from the barrel, so
+it was dead code carrying a `@radix-ui/react-radio-group` dependency.
+
+## Decision
+
+**They join the `field` group.** `field` now covers the label, the text
+controls, the choice controls, the help text and the error. This is what the
+field note said would happen, and the reason holds: five colour tokens declared
+per component drift on the first redesign. `checkedFill`, `checkedMark`,
+`checkedEdge`, `thumb` and `thumbShadow` are the only new colour-valued tokens,
+and they join `fieldPaletteTheme` so they resolve inside a forced palette.
+
+**Ink for a stored value, not accent.** The rules are explicit: "Ink for stored
+state: primary button, checked, on. `label` fill, `background` text", and
+"`accent` for live state only … Never a button fill." So a ticked box, a selected
+radio and a switch that is on take `colors.label` with `colors.background` on top
+of them. The elevation table already puts "switch off, checkbox off" on the well
+rung; on is the rung the primary button sits at, so it takes `shadow.inkEdge` as
+its top highlight too. The alternative — `accent` for the on state, which is what
+most systems do and what the rules' own phrase "live switch" gestures at — was
+rejected here because none of these 33 call sites is a live indicator. They store
+a preference. A surface that genuinely shows something running can revisit it,
+and the rules' sentence is the place to argue from.
+
+**A real `<button>`, not Base UI's default `<span>`.** Base UI renders these
+three as a `<span role="checkbox">` with a hidden input beside it, and its
+`nativeButton` prop swaps in a `<button>`. The span is the wrong element for this
+package for three separate reasons, each of which would otherwise cost a
+mechanism:
+
+- `:disabled` does not match a span. The field family dims a disabled control
+  with `opacity` under `:disabled`, so a span would need the disabled opacity
+  read from React state instead — a second disabled mechanism inside one family.
+- A `<label>`'s labelled control must be a labelable element, and `<button>` is
+  one while `<span>` is not. `Field.Root` renders `htmlFor` onto the control
+  either way, but only the button turns a click on the label into a toggle.
+- The repo's existing tests already query `button[role="switch"]`. Keeping the
+  element keeps what those tests assert true rather than rewriting them around a
+  new implementation.
+
+The cost is that a disabled control drops out of the tab order rather than
+staying focusable with `aria-disabled`. That matches how a disabled `<input>`
+behaves in the same family, so it is the consistent answer rather than a new one.
+
+**The ring is restated for each edge.** `well.box` composes the focus ring with
+`field.well`; `well.checked` composes it with `field.checkedEdge`. This is the
+same shape as Button, where each variant restates the ring with its own edge, and
+for the same reason: a box-shadow list cannot be appended to from a second class.
+Four states, two of them invalid, therefore cost four declarations in `well.ts`
+rather than one. The alternative was drawing the ring on a `::after` pseudo
+element, which composes with anything, but it would give this half of the family
+a different ring mechanism from the text controls for no gain.
+
+**Mixed is its own prop.** Radix modelled the third state as
+`checked="indeterminate"`, so every call site typed the value as
+`boolean | 'indeterminate'` and narrowed it back with `=== true` in its handler.
+Base UI has a separate `indeterminate` prop, `checked` is a boolean, and the two
+select-all call sites now pass `checked={allSelected}` beside
+`indeterminate={someSelected}`. A mixed box wears the checked ink and draws a
+dash, and announces `aria-checked="mixed"` — it must not fall back to the tick,
+which would state a value the selection does not hold.
+
+### Sizes
+
+A checkbox and a radio are `field.boxSize` (16) at `radius.mini`, which is
+exactly the "16px things" case the corner rule names; the radio overrides the
+radius to a full round. The switch is a 28×16 track at `radius.full` with a 12px
+thumb inset 2px, so its travel is derived in CSS from those three tokens rather
+than written down as a fourth. 16 is also the checkbox's height, so a settings
+list mixing the two lines up — which the old 36×20 switch did not, and which is
+why `auto-review-menu-item` had reached for `scale-75` to shrink one.
+
+There is no size ladder here. The 28 / 32 / 36 steps are heights for controls
+that hold text; a tick box has no text to set.
+
+### The mapping this closes
+
+| Old Tailwind concept                       | New token                                 |
+| ------------------------------------------ | ----------------------------------------- |
+| `border-input-border`, `shadow-xs`         | `field.well` (`shadow.inset`); no border  |
+| `data-[state=checked]:bg-primary`          | `field.checkedFill` (`label`)             |
+| `data-[state=checked]:text-primary-fg`     | `field.checkedMark` (`background`)        |
+| — (the checked box had no edge)            | `field.checkedEdge` (`shadow.inkEdge`)    |
+| `data-[state=unchecked]:bg-switch-track`   | `field.background` (`wellBackground`)     |
+| switch thumb `bg-background shadow-lg`     | `field.thumb` + `field.thumbShadow`       |
+| `focus-visible:ring-ring/50 ring-offset-2` | `field.ring` (`accent`), 2px, no offset   |
+| `aria-invalid:ring-destructive/20`         | `field.invalidRing` (`destructive`), 2px  |
+| `disabled:opacity-50`                      | `field.disabledOpacity` (45%)             |
+| `size-4 rounded-[4px]`                     | `field.boxSize` (16) at `radius.mini` (5) |
+| switch `h-5 w-9` with a 16px thumb         | 28×16 track with a 12px thumb, inset 2px  |
+
+The tick and the dash are drawn as inline SVG paths rather than taken from
+`lucide-react`, because the package depends on React, Base UI and StyleX only.
+
+## Migrating the callers
+
+All 33 files import from `@lody/ui/checkbox` and `@lody/ui/switch`, and
+`checkbox.tsx`, `switch.tsx` and `radio-group.tsx` are deleted with their barrel
+exports and their three `@radix-ui` dependencies. `Radio` and `RadioGroup` ship
+with no caller: the file they replace had none either, and a primitive library is
+the one place where that is the right order.
+
+Spending the contract on real call sites found three classes of caller state:
+
+- **Visual overrides.** `workdir-mode-selector` rebuilt the checkbox at 12px in
+  `muted-foreground/15` with its own checked colours and `disabled:opacity-100`,
+  which is the reconstruction the package rule forbids and which stopped matching
+  anything the moment `data-[state=checked]` became `data-checked`. It is gone;
+  the pill holds the primitive.
+- **Sizes that are now the primitive's.** `mobile-chat-list` and
+  `mobile-project-screen` passed `h-4 w-4`, and `auto-review-menu-item` passed
+  `scale-75`. All three were compensating for the old dimensions.
+- **Layout and interaction.** `pointer-events-none`, `shrink-0`, `ml-4`, `mt-0.5`
+  stay: they are the caller's constraint, not the primitive's identity.
+
+`message-selection`'s tests read `[data-state="checked"]`, which is Radix's
+attribute; Base UI writes `data-checked`. The four assertions moved with it.
+
+## Verification
+
+`pnpm --filter @lody/ui test` (46 tests, 16 of them new) and
+`pnpm --filter @lody/ui typecheck` pass, as does
+`pnpm --filter @lody/components typecheck`. The new tests cover the rendered
+element and role, the tick appearing only once the box holds a value, the mixed
+box announcing mixed and drawing the dash rather than the tick, the checked state
+swapping the well for the ink rather than stacking on it, the thumb differing
+between tracks by its travel alone, the three sharing the box styles rather than
+each defining one, an unchecked control wearing the same invalid ring class as a
+text control while a checked one gets a different one composed with its ink edge,
+`Field.Root` reaching the control with disabled and validity, the label pointing
+at the control, and a caller class landing last.
+
+The board was read in Chromium through Storybook at 1440px, values taken off the
+rendered nodes in both palettes. The box is 16×16 at radius 5, the track 28×16
+at a full round with a 12×12 thumb inset 2px that travels to 14px from the left.
+Off is `rgb(232, 234, 237)` in Lody Light and `rgb(28, 28, 28)` in Vesper with
+the matching inset; on is `rgb(26, 27, 30)` and `rgb(255, 255, 255)` with the ink
+highlight; disabled reports opacity `0.45`. Focusing a control by keyboard
+produced `… inset, rgb(93, 141, 239) 0px 0px 0px 2px`, an invalid one kept
+`rgb(206, 34, 45)` while focused, and a checked one kept its ink edge under the
+accent ring. Clicking the label toggled the box, which is the labelable-element
+behaviour the native button buys. The console reported no errors.
+
+The product shell was checked too, which is where the shell's Tailwind base layer
+could have interfered: the `UI/Switch` story and the beta-features settings
+section render at the right size and colours, and clicking a switch there flipped
+the atom the surface reads.
+
+Limits: no test asserts a rendered appearance, and the board itself draws no
+focus ring, because a board cannot hold focus while it is read — the rings above
+were read by focusing a control in the browser rather than from a sample.
+`pnpm check` was not run to completion for the whole repository in this session;
+`packages/components`' test suite fails on this machine before and after the
+change with `act is not a function`, which was confirmed by running the same
+file against the base commit and is unrelated. `THIRD_PARTY_NOTICES.md` still
+lists the three removed packages: regenerating it here would rewrite the whole
+file against a different dependency snapshot, and the field migration left it in
+the same state. Only Chromium was checked, and no mobile surface was opened.
+
+## Follow-ups
+
+`Button` still has no visible keyboard focus ring in the desktop shell; the two
+open fixes are in the [field primitives note](2026-09-09-ui-field-primitives.md).
+Select and Combobox are the next slice and are the first controls in this family
+to need popup, keyboard navigation and overlay tokens. Whether a switch that
+reports something live should take `accent` rather than ink is open, and belongs
+to the first surface that has one. `THIRD_PARTY_NOTICES.md` and the generated
+attributions want one regeneration pass together.
diff --git a/packages/components/package.json b/packages/components/package.json
index f221af4f8..7546a2465 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -102,19 +102,16 @@
     "@posthog/react": "^1.10.3",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.14",
-    "@radix-ui/react-checkbox": "^1.3.2",
     "@radix-ui/react-collapsible": "^1.1.12",
     "@radix-ui/react-context-menu": "^2.2.15",
     "@radix-ui/react-dialog": "^1.1.14",
     "@radix-ui/react-dropdown-menu": "^2.0.6",
     "@radix-ui/react-menubar": "^1.1.15",
     "@radix-ui/react-popover": "^1.0.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
     "@radix-ui/react-scroll-area": "^1.2.9",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-tabs": "^1.0.4",
     "@radix-ui/react-toggle": "^1.1.9",
     "@radix-ui/react-tooltip": "^1.2.9",
diff --git a/packages/components/src/components/ai-gui/message-selection.tsx b/packages/components/src/components/ai-gui/message-selection.tsx
index 2f3020c49..d17f836fb 100644
--- a/packages/components/src/components/ai-gui/message-selection.tsx
+++ b/packages/components/src/components/ai-gui/message-selection.tsx
@@ -13,7 +13,7 @@ import { useTranslation } from 'react-i18next';
 import { ImageIcon } from 'lucide-react';
 import type { ConversationMessage } from '@lody/shared';
 import { Button } from '@lody/ui/button';
-import { Checkbox } from '@/ui/checkbox';
+import { Checkbox } from '@lody/ui/checkbox';
 import { ConversationColumn } from '@/components/shared/conversation-column';
 
 type SelectionGesture = {
diff --git a/packages/components/src/components/archive/archive-view.tsx b/packages/components/src/components/archive/archive-view.tsx
index 8e36bc8ab..a62c981c0 100644
--- a/packages/components/src/components/archive/archive-view.tsx
+++ b/packages/components/src/components/archive/archive-view.tsx
@@ -26,7 +26,7 @@ import {
 import type { LucideIcon } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { Button } from '@lody/ui/button';
-import { Checkbox } from '@/ui/checkbox';
+import { Checkbox } from '@lody/ui/checkbox';
 import {
   Dialog,
   DialogContent,
@@ -895,12 +895,6 @@ export function ArchivedSessionGroupSection({
   const allSelected = selectedInGroup === group.sessions.length && group.sessions.length > 0;
   const someSelected = selectedInGroup > 0 && !allSelected;
 
-  const groupCheckboxState: boolean | 'indeterminate' = allSelected
-    ? true
-    : someSelected
-      ? 'indeterminate'
-      : false;
-
   const showHeader = !hideGroupHeader;
   const showSessions = hideGroupHeader || !group.collapsed;
   const sessionTree = useMemo(() => buildArchivedSessionTree(group.sessions), [group.sessions]);
@@ -928,7 +922,8 @@ export function ArchivedSessionGroupSection({
               }}
             >
               <Checkbox
-                checked={groupCheckboxState}
+                checked={allSelected}
+                indeterminate={someSelected}
                 onCheckedChange={() => onToggleGroupSelect(groupKey, groupSessionIds)}
                 aria-label={`Select all in ${label}`}
               />
diff --git a/packages/components/src/components/loro-app-sidebar.tsx b/packages/components/src/components/loro-app-sidebar.tsx
index b6cdb4870..dae27d2d3 100644
--- a/packages/components/src/components/loro-app-sidebar.tsx
+++ b/packages/components/src/components/loro-app-sidebar.tsx
@@ -106,7 +106,7 @@ import {
   DialogTitle,
 } from '@/ui/dialog';
 import { Button } from '@lody/ui/button';
-import { Checkbox } from '@/ui/checkbox';
+import { Checkbox } from '@lody/ui/checkbox';
 import {
   ContextMenu,
   ContextMenuContent,
@@ -354,7 +354,7 @@ export function RemoveLocalProjectDialog({
                 className="mt-0.5"
                 checked={cleanupWorktrees}
                 disabled={!canCleanupWorktrees || isRemoving}
-                onCheckedChange={(checked) => void setCleanup(checked === true)}
+                onCheckedChange={(checked) => void setCleanup(checked)}
               />
               <span>
                 <span className="block font-medium text-foreground">
diff --git a/packages/components/src/components/mobile/mobile-about-settings.tsx b/packages/components/src/components/mobile/mobile-about-settings.tsx
index cd67a2d37..bed5dd188 100644
--- a/packages/components/src/components/mobile/mobile-about-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-about-settings.tsx
@@ -4,7 +4,7 @@ import { Loader2, CheckCircle2, AlertCircle, Download, ExternalLink } from 'luci
 import type { ElectronUpdaterPhase } from '@lody/shared';
 import { useAtom } from 'jotai';
 import { Button } from '@lody/ui/button';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import {
   developerModeEnabledAtom,
   inboxBetaEnabledAtom,
diff --git a/packages/components/src/components/mobile/mobile-chat-list.tsx b/packages/components/src/components/mobile/mobile-chat-list.tsx
index 8f6fdc409..a89374de7 100644
--- a/packages/components/src/components/mobile/mobile-chat-list.tsx
+++ b/packages/components/src/components/mobile/mobile-chat-list.tsx
@@ -29,7 +29,7 @@ import {
 } from '@/atoms/focus-layer';
 import { buildSessionRowOpenedByTreeSlot } from '@/components/sidebar-row-shared';
 import { cn } from '@/lib/utils';
-import { Checkbox } from '@/ui/checkbox';
+import { Checkbox } from '@lody/ui/checkbox';
 import {
   AlertDialog,
   AlertDialogAction,
@@ -1428,7 +1428,7 @@ function SelectionToolbar({
         onClick={onToggleAll}
         className="inline-flex items-center gap-2 text-sm font-medium text-foreground"
       >
-        <Checkbox checked={allSelected} tabIndex={-1} className="pointer-events-none h-4 w-4" />
+        <Checkbox checked={allSelected} tabIndex={-1} className="pointer-events-none" />
         <span>{countLabel}</span>
       </button>
       <div className="flex items-center gap-1">
diff --git a/packages/components/src/components/mobile/mobile-general-settings.tsx b/packages/components/src/components/mobile/mobile-general-settings.tsx
index 037f39da1..2f73e8c68 100644
--- a/packages/components/src/components/mobile/mobile-general-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-general-settings.tsx
@@ -6,7 +6,7 @@ import type {
 } from '@lody/shared';
 import { useAtom, useAtomValue } from 'jotai';
 import { Loading } from '@/ui';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { toast } from 'sonner';
 import {
   autoArchiveOnPrClosedAtom,
diff --git a/packages/components/src/components/mobile/mobile-integrations-settings.tsx b/packages/components/src/components/mobile/mobile-integrations-settings.tsx
index de23478e8..24d8db3cf 100644
--- a/packages/components/src/components/mobile/mobile-integrations-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-integrations-settings.tsx
@@ -8,7 +8,7 @@ import { currentWorkspaceSlugAtom } from '@/atoms';
 import { cloudOperations } from '@/lib/cloud-api-operations';
 import { cn } from '@/lib/utils';
 import { useAppCapability } from '@/lib/app-platform';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { Input } from '@lody/ui/input';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
diff --git a/packages/components/src/components/mobile/mobile-local-project-settings.tsx b/packages/components/src/components/mobile/mobile-local-project-settings.tsx
index 0202e61fc..9e698a9ea 100644
--- a/packages/components/src/components/mobile/mobile-local-project-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-local-project-settings.tsx
@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next';
 import { useAtomValue } from 'jotai';
 import { machineSupportsLocalProjectRemovalProtocol, type MachineId } from '@lody/shared';
 import { ChevronRight, Loader2, Wrench } from 'lucide-react';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { TooltipProvider } from '@/ui/tooltip';
 import { currentWorkspaceIdAtom } from '@/atoms';
 import { getMachineMetaMapAtom } from '@/atoms/machines';
diff --git a/packages/components/src/components/mobile/mobile-project-screen.tsx b/packages/components/src/components/mobile/mobile-project-screen.tsx
index 9e5625288..a3b0f33e3 100644
--- a/packages/components/src/components/mobile/mobile-project-screen.tsx
+++ b/packages/components/src/components/mobile/mobile-project-screen.tsx
@@ -22,7 +22,7 @@ import { isNativeAppShell } from '@/lib/native-platform';
 import { consumeMobileBackNavigation } from '@/lib/mobile-back-navigation';
 import { cn } from '@/lib/utils';
 import { useLongPress } from '@/hooks/use-long-press';
-import { Checkbox } from '@/ui/checkbox';
+import { Checkbox } from '@lody/ui/checkbox';
 import { CachedAvatarImg } from '@/components/cached-avatar-img';
 import { WorktreeIcon } from '@/components/icons/worktree-icon';
 import {
@@ -563,7 +563,7 @@ export function ConversationRow({
           <Checkbox
             checked={isSelected}
             tabIndex={-1}
-            className="pointer-events-none h-4 w-4"
+            className="pointer-events-none"
             aria-hidden="true"
           />
         ) : (
diff --git a/packages/components/src/components/mobile/mobile-project-settings.tsx b/packages/components/src/components/mobile/mobile-project-settings.tsx
index 946a147bf..d481993e9 100644
--- a/packages/components/src/components/mobile/mobile-project-settings.tsx
+++ b/packages/components/src/components/mobile/mobile-project-settings.tsx
@@ -2,7 +2,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ChevronRight, Folder, FolderOpen, FolderPlus, Github, Loader2 } from 'lucide-react';
 import type { MachineId } from '@lody/shared';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { TooltipProvider } from '@/ui/tooltip';
 import { cn } from '@/lib/utils';
 import { useOnlineMachineIds } from '@/hooks/use-machine-online-status';
diff --git a/packages/components/src/components/mobile/mobile-remove-local-project-sheet.tsx b/packages/components/src/components/mobile/mobile-remove-local-project-sheet.tsx
index 0916696ad..68efde21c 100644
--- a/packages/components/src/components/mobile/mobile-remove-local-project-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-remove-local-project-sheet.tsx
@@ -5,7 +5,7 @@ import { Loader2, X } from 'lucide-react';
 
 import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerTitle } from '@/ui/drawer';
 import { Button } from '@lody/ui/button';
-import { Checkbox } from '@/ui/checkbox';
+import { Checkbox } from '@lody/ui/checkbox';
 import { cn } from '@/lib/utils';
 
 export type MobileRemoveLocalProjectSheetProps = {
@@ -197,7 +197,7 @@ export function MobileRemoveLocalProjectSheet({
                   className="mt-0.5"
                   checked={cleanupWorktrees}
                   disabled={!canCleanupWorktrees || isRemoving}
-                  onCheckedChange={(checked) => void handleCleanupChange(checked === true)}
+                  onCheckedChange={(checked) => void handleCleanupChange(checked)}
                 />
                 <span>
                   <span className="block font-medium text-foreground">
diff --git a/packages/components/src/components/mobile/mobile-run-config-sheet.tsx b/packages/components/src/components/mobile/mobile-run-config-sheet.tsx
index b85874010..22d384528 100644
--- a/packages/components/src/components/mobile/mobile-run-config-sheet.tsx
+++ b/packages/components/src/components/mobile/mobile-run-config-sheet.tsx
@@ -33,7 +33,7 @@ import { openExternalUrl } from '@/lib/native-browser';
 import { useKeyboardAwareSheet } from '@/hooks/use-keyboard-aware-scroll-into-view';
 import { cn } from '@/lib/utils';
 import { Drawer, DrawerContent, DrawerDescription, DrawerTitle } from '@/ui/drawer';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import {
   classifyPermissionModeFace,
   getAgentRoleEmoji,
diff --git a/packages/components/src/components/sessions/auto-review-menu-item.tsx b/packages/components/src/components/sessions/auto-review-menu-item.tsx
index bec08d0ff..596892c2f 100644
--- a/packages/components/src/components/sessions/auto-review-menu-item.tsx
+++ b/packages/components/src/components/sessions/auto-review-menu-item.tsx
@@ -4,7 +4,7 @@ import { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import type { SessionId, SessionMeta } from '@lody/shared';
 import { DropdownMenuItem, DropdownMenuSeparator } from '@/ui/dropdown-menu';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';
 import { reviewAgentFeatureEnabledAtom } from '@/atoms/settings';
 import { useAutoReview } from '@/hooks/use-auto-review';
@@ -126,7 +126,7 @@ export function AutoReviewMenuItem({
         </Popover>
         <Switch
           checked={enabled}
-          className="pointer-events-none scale-75"
+          className="pointer-events-none"
           aria-label={t('sessions.autoReview.menuLabel', 'Auto review and merge')}
         />
       </DropdownMenuItem>
diff --git a/packages/components/src/components/sessions/chat-share-image-dialog.tsx b/packages/components/src/components/sessions/chat-share-image-dialog.tsx
index d6e95a7f0..376b64801 100644
--- a/packages/components/src/components/sessions/chat-share-image-dialog.tsx
+++ b/packages/components/src/components/sessions/chat-share-image-dialog.tsx
@@ -10,7 +10,7 @@ import { Field as UiField } from '@lody/ui/field';
 import { Input } from '@lody/ui/input';
 import { Button } from '@lody/ui/button';
 import { copyChatShareImage, exportChatShareImage } from '@/lib/chat-share-image-export';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
 import {
   ChatShareCard,
diff --git a/packages/components/src/components/sessions/desktop-run-config-menu.tsx b/packages/components/src/components/sessions/desktop-run-config-menu.tsx
index 9ebdc0966..7365079ce 100644
--- a/packages/components/src/components/sessions/desktop-run-config-menu.tsx
+++ b/packages/components/src/components/sessions/desktop-run-config-menu.tsx
@@ -49,7 +49,7 @@ import {
 import { cn } from '@/lib/utils';
 import { useOnlineMachines } from '@/hooks/use-online-machines';
 import { Badge } from '@/ui/badge';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import {
   DropdownMenu,
diff --git a/packages/components/src/components/settings/about-setting.tsx b/packages/components/src/components/settings/about-setting.tsx
index 31bfd5352..773cdcef2 100644
--- a/packages/components/src/components/settings/about-setting.tsx
+++ b/packages/components/src/components/settings/about-setting.tsx
@@ -4,7 +4,7 @@ import { useAtom } from 'jotai';
 import { Loader2, CheckCircle2, AlertCircle, Download, ExternalLink } from 'lucide-react';
 import type { ElectronUpdaterPhase } from '@lody/shared';
 import { Button } from '@lody/ui/button';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { BetaFeaturesSection } from './beta-features-setting';
 import { CompactRow, CompactSection } from './compact-layout';
 import { settingContainerClass } from '.';
diff --git a/packages/components/src/components/settings/agent-role-form.tsx b/packages/components/src/components/settings/agent-role-form.tsx
index 24ccf8e29..acce86025 100644
--- a/packages/components/src/components/settings/agent-role-form.tsx
+++ b/packages/components/src/components/settings/agent-role-form.tsx
@@ -23,7 +23,7 @@ import { Input } from '@lody/ui/input';
 import { Field as UiField } from '@lody/ui/field';
 import { Popover, PopoverContent, PopoverTrigger } from '@/ui/popover';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { Textarea } from '@lody/ui/textarea';
 import { Field, Section } from './form-primitives';
 
diff --git a/packages/components/src/components/settings/auto-archive-setting.tsx b/packages/components/src/components/settings/auto-archive-setting.tsx
index d55d01c22..dd699b764 100644
--- a/packages/components/src/components/settings/auto-archive-setting.tsx
+++ b/packages/components/src/components/settings/auto-archive-setting.tsx
@@ -1,7 +1,7 @@
 import { useAtom } from 'jotai';
 import { useTranslation } from 'react-i18next';
 import { autoArchiveOnPrClosedAtom, autoArchiveOnPrMergedAtom } from '@/atoms';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { CompactRow, CompactSection } from './compact-layout';
 
 export function AutoArchiveSection() {
diff --git a/packages/components/src/components/settings/beta-features-setting.tsx b/packages/components/src/components/settings/beta-features-setting.tsx
index aad902a85..9ce5ed907 100644
--- a/packages/components/src/components/settings/beta-features-setting.tsx
+++ b/packages/components/src/components/settings/beta-features-setting.tsx
@@ -1,6 +1,6 @@
 import { useAtom, useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import {
   developerModeEnabledAtom,
   inboxBetaEnabledAtom,
diff --git a/packages/components/src/components/settings/experimental-features-setting.tsx b/packages/components/src/components/settings/experimental-features-setting.tsx
index 395241ae3..5dc6cde89 100644
--- a/packages/components/src/components/settings/experimental-features-setting.tsx
+++ b/packages/components/src/components/settings/experimental-features-setting.tsx
@@ -1,6 +1,6 @@
 import { useAtom, useAtomValue } from 'jotai';
 import { useTranslation } from 'react-i18next';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import {
   experimentalFeaturesEnabledAtom,
   reviewAgentExperimentEnabledAtom,
diff --git a/packages/components/src/components/settings/general-setting.tsx b/packages/components/src/components/settings/general-setting.tsx
index d29bd9126..372343aa9 100644
--- a/packages/components/src/components/settings/general-setting.tsx
+++ b/packages/components/src/components/settings/general-setting.tsx
@@ -7,7 +7,7 @@ import type {
 import { Trash2 } from 'lucide-react';
 import { Loading } from '@/ui';
 import { Button } from '@lody/ui/button';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
 import { toast } from 'sonner';
 import {
diff --git a/packages/components/src/components/settings/integrations-setting.tsx b/packages/components/src/components/settings/integrations-setting.tsx
index 5796698ef..e7c22aceb 100644
--- a/packages/components/src/components/settings/integrations-setting.tsx
+++ b/packages/components/src/components/settings/integrations-setting.tsx
@@ -18,7 +18,7 @@ import { cloudOperations } from '@/lib/cloud-api-operations';
 import { cn } from '@/lib/utils';
 import { useAppCapability } from '@/lib/app-platform';
 import { ScrollArea } from '@/ui/scroll-area';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { Input } from '@lody/ui/input';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { toast } from 'sonner';
diff --git a/packages/components/src/components/settings/machine-detail-pane.tsx b/packages/components/src/components/settings/machine-detail-pane.tsx
index 53418acc1..86fcfa4b1 100644
--- a/packages/components/src/components/settings/machine-detail-pane.tsx
+++ b/packages/components/src/components/settings/machine-detail-pane.tsx
@@ -28,7 +28,7 @@ import {
 import { Badge } from '@/ui/badge';
 import { Button } from '@lody/ui/button';
 import { Input } from '@lody/ui/input';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import {
   DropdownMenu,
   DropdownMenuContent,
diff --git a/packages/components/src/components/settings/mcp-connection-form.tsx b/packages/components/src/components/settings/mcp-connection-form.tsx
index a33f4aaea..bed3a7a2d 100644
--- a/packages/components/src/components/settings/mcp-connection-form.tsx
+++ b/packages/components/src/components/settings/mcp-connection-form.tsx
@@ -11,7 +11,7 @@ import { cn } from '@/lib/utils';
 import { Button } from '@lody/ui/button';
 import { Input } from '@lody/ui/input';
 import { Field as UiField } from '@lody/ui/field';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { Textarea } from '@lody/ui/textarea';
 import { Field, Section } from './form-primitives';
 
diff --git a/packages/components/src/components/settings/mcp-setting.tsx b/packages/components/src/components/settings/mcp-setting.tsx
index e5ee39004..080b80889 100644
--- a/packages/components/src/components/settings/mcp-setting.tsx
+++ b/packages/components/src/components/settings/mcp-setting.tsx
@@ -31,7 +31,7 @@ import {
 import { Badge } from '@/ui/badge';
 import { Button } from '@lody/ui/button';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ui/dialog';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
 import { settingContainerClass } from '.';
 import { McpConnectionForm, type McpConnectionFormValue } from './mcp-connection-form';
@@ -310,7 +310,7 @@ export function McpServerRow({
           </span>
         </button>
         <div className="flex shrink-0 items-center gap-2 py-2 pl-2 pr-2">
-          {/* The switch keeps its own Radix `data-state`, so the label sits
+          {/* The switch carries its own state attributes, so the label sits
               beside it rather than wrapping it in a tooltip trigger. */}
           <label
             className="flex cursor-pointer items-center gap-1.5 text-[11px] text-muted-foreground"
diff --git a/packages/components/src/components/settings/my-machine-connected-resources.tsx b/packages/components/src/components/settings/my-machine-connected-resources.tsx
index 1fab5c565..87f96d5f8 100644
--- a/packages/components/src/components/settings/my-machine-connected-resources.tsx
+++ b/packages/components/src/components/settings/my-machine-connected-resources.tsx
@@ -4,7 +4,7 @@ import { Bot, Folder } from 'lucide-react';
 import type { AgentConfigMeta, MachineId } from '@lody/shared';
 import { useLocalProjectsAdmin } from '@/hooks/use-local-projects-admin';
 import { Button } from '@lody/ui/button';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import type { ProjectSettingsRow } from './project-settings';
 
 export type MachineConnectedProject = {
diff --git a/packages/components/src/components/settings/project-settings.tsx b/packages/components/src/components/settings/project-settings.tsx
index ebf3d3635..f565c11e7 100644
--- a/packages/components/src/components/settings/project-settings.tsx
+++ b/packages/components/src/components/settings/project-settings.tsx
@@ -46,14 +46,14 @@ import { useIsMobile } from '@/hooks/use-mobile';
 import { useLocalProjectsAdmin } from '@/hooks/use-local-projects-admin';
 import { useOnlineMachineIds } from '@/hooks/use-machine-online-status';
 import { Button, type ButtonProps } from '@lody/ui/button';
-import { Checkbox } from '@/ui/checkbox';
+import { Checkbox } from '@lody/ui/checkbox';
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@/ui/dropdown-menu';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { CachedAvatarImg } from '@/components/cached-avatar-img';
 import { getGitHubOwnerAvatarUrl } from '@/lib/github-avatar';
 import { Textarea } from '@lody/ui/textarea';
@@ -1528,11 +1528,7 @@ export function ProjectHistoryImportPanel({
   const someSelectableSelected = selectableSessions.some((session) =>
     selectedSet.has(session.acpSessionId)
   );
-  const selectAllChecked = allSelectableSelected
-    ? true
-    : someSelectableSelected
-      ? 'indeterminate'
-      : false;
+  const someButNotAllSelected = someSelectableSelected && !allSelectableSelected;
   const lastListedAtDate =
     typeof state.catalog?.lastListedAt === 'number' ? new Date(state.catalog.lastListedAt) : null;
   const statusLabel = lastListedAtDate
@@ -1685,7 +1681,8 @@ export function ProjectHistoryImportPanel({
               }}
             >
               <Checkbox
-                checked={selectAllChecked}
+                checked={allSelectableSelected}
+                indeterminate={someButNotAllSelected}
                 disabled={selectableSessions.length === 0 || !canManageCatalog}
                 onCheckedChange={toggleSelectAll}
                 onClick={(event) => event.stopPropagation()}
diff --git a/packages/components/src/components/settings/review-policy-setting.tsx b/packages/components/src/components/settings/review-policy-setting.tsx
index c07e2a242..f90338718 100644
--- a/packages/components/src/components/settings/review-policy-setting.tsx
+++ b/packages/components/src/components/settings/review-policy-setting.tsx
@@ -42,7 +42,7 @@ import {
 import { MobileSettingsRow, MobileSettingsSection } from '@/components/mobile/mobile-settings-row';
 import { Button } from '@lody/ui/button';
 import { Input } from '@lody/ui/input';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { Textarea } from '@lody/ui/textarea';
 import { cn } from '@/lib/utils';
 import { CompactRow, CompactSection } from './compact-layout';
diff --git a/packages/components/src/components/shared/workdir-mode-selector.tsx b/packages/components/src/components/shared/workdir-mode-selector.tsx
index 40c2b865d..1a46555c9 100644
--- a/packages/components/src/components/shared/workdir-mode-selector.tsx
+++ b/packages/components/src/components/shared/workdir-mode-selector.tsx
@@ -10,7 +10,7 @@ import {
   DropdownMenuTrigger,
 } from '@/ui/dropdown-menu';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/ui/tooltip';
-import { Checkbox } from '@/ui/checkbox';
+import { Checkbox } from '@lody/ui/checkbox';
 
 export type WorkdirMode = 'local' | 'worktree';
 
@@ -54,15 +54,9 @@ export function WorktreeCheckboxPill({
     >
       <Checkbox
         checked={checked}
-        onCheckedChange={(next) => onCheckedChange?.(next === true)}
+        onCheckedChange={(next) => onCheckedChange?.(next)}
         disabled={disabled}
         aria-label={t('chat.workdir.worktreeToggle', 'Use worktree')}
-        className={cn(
-          'size-3 rounded-[3px] border-transparent bg-muted-foreground/15 shadow-none [&_svg]:size-3',
-          'data-[state=checked]:border-transparent data-[state=checked]:bg-muted-foreground/25 data-[state=checked]:text-foreground/80',
-          'dark:bg-muted-foreground/15 dark:data-[state=checked]:bg-muted-foreground/25',
-          'disabled:cursor-not-allowed disabled:opacity-100'
-        )}
       />
       <span>{t('chat.workdir.worktreePill', 'worktree')}</span>
     </label>
diff --git a/packages/components/src/components/tasks/task-agent-run-config-menu.tsx b/packages/components/src/components/tasks/task-agent-run-config-menu.tsx
index 80758eb40..e057bbb4c 100644
--- a/packages/components/src/components/tasks/task-agent-run-config-menu.tsx
+++ b/packages/components/src/components/tasks/task-agent-run-config-menu.tsx
@@ -34,7 +34,7 @@ import { cn } from '@/lib/utils';
 import { useAcpSelectorOptions } from '@/hooks/use-acp-selector-options';
 import { useOnlineMachineIds } from '@/hooks/use-machine-online-status';
 import { useVisibleMachineMetas } from '@/hooks/use-visible-machine-metas';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import {
   DropdownMenu,
   DropdownMenuContent,
diff --git a/packages/components/src/components/tasks/task-quick-add-dialog.tsx b/packages/components/src/components/tasks/task-quick-add-dialog.tsx
index 25124050a..daa8454d0 100644
--- a/packages/components/src/components/tasks/task-quick-add-dialog.tsx
+++ b/packages/components/src/components/tasks/task-quick-add-dialog.tsx
@@ -16,7 +16,7 @@ import { taskLabelPillStyle } from './task-label-presentation';
 import type { UnifiedLocalProjectOption } from '@/components/chat/unified-project-selector';
 import { cn } from '@/lib/utils';
 import { Button } from '@lody/ui/button';
-import { Checkbox } from '@/ui/checkbox';
+import { Checkbox } from '@lody/ui/checkbox';
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/ui/dialog';
 import {
   DropdownMenu,
@@ -444,7 +444,7 @@ export function TaskQuickAddDialog({
             <Checkbox
               checked={createMore}
               disabled={submitting}
-              onCheckedChange={(checked) => onCreateMoreChange(checked === true)}
+              onCheckedChange={(checked) => onCreateMoreChange(checked)}
             />
             {t('tasks.quickAdd.createMore', 'Create more')}
           </label>
diff --git a/packages/components/src/lib/open-source-attributions.generated.ts b/packages/components/src/lib/open-source-attributions.generated.ts
index 391360ae7..df398f5f2 100644
--- a/packages/components/src/lib/open-source-attributions.generated.ts
+++ b/packages/components/src/lib/open-source-attributions.generated.ts
@@ -2273,17 +2273,6 @@ export const OPEN_SOURCE_ATTRIBUTION_BUNDLE: OpenSourceAttributionBundle = {
         "1.1.7"
       ]
     },
-    {
-      "id": "pkg-radix-ui-react-checkbox-mit",
-      "kind": "package",
-      "scope": "production-dependency",
-      "name": "@radix-ui/react-checkbox",
-      "license": "MIT",
-      "homepage": "https://radix-ui.com/primitives",
-      "versions": [
-        "1.3.3"
-      ]
-    },
     {
       "id": "pkg-radix-ui-react-collapsible-mit",
       "kind": "package",
@@ -2501,17 +2490,6 @@ export const OPEN_SOURCE_ATTRIBUTION_BUNDLE: OpenSourceAttributionBundle = {
         "2.1.6"
       ]
     },
-    {
-      "id": "pkg-radix-ui-react-radio-group-mit",
-      "kind": "package",
-      "scope": "production-dependency",
-      "name": "@radix-ui/react-radio-group",
-      "license": "MIT",
-      "homepage": "https://radix-ui.com/primitives",
-      "versions": [
-        "1.3.8"
-      ]
-    },
     {
       "id": "pkg-radix-ui-react-roving-focus-mit",
       "kind": "package",
@@ -2570,17 +2548,6 @@ export const OPEN_SOURCE_ATTRIBUTION_BUNDLE: OpenSourceAttributionBundle = {
         "1.3.0"
       ]
     },
-    {
-      "id": "pkg-radix-ui-react-switch-mit",
-      "kind": "package",
-      "scope": "production-dependency",
-      "name": "@radix-ui/react-switch",
-      "license": "MIT",
-      "homepage": "https://radix-ui.com/primitives",
-      "versions": [
-        "1.2.6"
-      ]
-    },
     {
       "id": "pkg-radix-ui-react-tabs-mit",
       "kind": "package",
diff --git a/packages/components/src/stories/Switch.stories.tsx b/packages/components/src/stories/Switch.stories.tsx
index 43b2aaa51..59b12a794 100644
--- a/packages/components/src/stories/Switch.stories.tsx
+++ b/packages/components/src/stories/Switch.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { useEffect } from 'react';
-import { Switch } from '@/ui/switch';
+import { Switch } from '@lody/ui/switch';
 import { useTheme } from '@/theme-provider';
 import { Field as UiField } from '@lody/ui/field';
 
diff --git a/packages/components/src/ui/checkbox.tsx b/packages/components/src/ui/checkbox.tsx
deleted file mode 100644
index 26a584959..000000000
--- a/packages/components/src/ui/checkbox.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { CheckIcon, MinusIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-function Checkbox({
-  className,
-  checked,
-  ...props
-}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
-  return (
-    <CheckboxPrimitive.Root
-      data-slot="checkbox"
-      checked={checked}
-      className={cn(
-        'peer border-input-border dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <CheckboxPrimitive.Indicator
-        data-slot="checkbox-indicator"
-        className="flex items-center justify-center text-current transition-none"
-      >
-        {checked === 'indeterminate' ? (
-          <MinusIcon className="size-3.5" />
-        ) : (
-          <CheckIcon className="size-3.5" />
-        )}
-      </CheckboxPrimitive.Indicator>
-    </CheckboxPrimitive.Root>
-  );
-}
-
-export { Checkbox };
diff --git a/packages/components/src/ui/index.ts b/packages/components/src/ui/index.ts
index c6f7ae472..c7fd89eab 100644
--- a/packages/components/src/ui/index.ts
+++ b/packages/components/src/ui/index.ts
@@ -5,7 +5,6 @@ export { Button } from '@lody/ui/button';
 export type { ButtonProps } from '@lody/ui/button';
 export * from './calendar';
 export * from './card';
-export * from './checkbox';
 export * from './collapsible';
 export * from './command';
 export * from './dialog';
@@ -21,7 +20,6 @@ export * from './sheet';
 // export * from './sidebar-resizer' // Has external dependencies - needs to be refactored
 // export * from './sidebar' // Has external dependencies - needs to be refactored
 export * from './skeleton';
-export * from './switch';
 export * from './tabs';
 export * from './tooltip';
 export * from './workspace-list';
diff --git a/packages/components/src/ui/radio-group.tsx b/packages/components/src/ui/radio-group.tsx
deleted file mode 100644
index 9fb138db7..000000000
--- a/packages/components/src/ui/radio-group.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import * as React from 'react';
-import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
-import { CircleIcon } from 'lucide-react';
-
-import { cn } from '@/lib/utils';
-
-function RadioGroup({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {
-  return (
-    <RadioGroupPrimitive.Root
-      data-slot="radio-group"
-      className={cn('grid gap-3', className)}
-      {...props}
-    />
-  );
-}
-
-function RadioGroupItem({
-  className,
-  ...props
-}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {
-  return (
-    <RadioGroupPrimitive.Item
-      data-slot="radio-group-item"
-      className={cn(
-        'border-input-border text-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs transition-[color,box-shadow] outline-hidden focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
-        className
-      )}
-      {...props}
-    >
-      <RadioGroupPrimitive.Indicator
-        data-slot="radio-group-indicator"
-        className="relative flex items-center justify-center"
-      >
-        <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
-      </RadioGroupPrimitive.Indicator>
-    </RadioGroupPrimitive.Item>
-  );
-}
-
-export { RadioGroup, RadioGroupItem };
diff --git a/packages/components/src/ui/switch.tsx b/packages/components/src/ui/switch.tsx
deleted file mode 100644
index 006557d97..000000000
--- a/packages/components/src/ui/switch.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import * as React from 'react';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-
-import { cn } from '@/lib/utils';
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-xs transition-colors focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-switch-track',
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };
diff --git a/packages/components/tests/message-selection.test.tsx b/packages/components/tests/message-selection.test.tsx
index 12d5c7d84..46ae02304 100644
--- a/packages/components/tests/message-selection.test.tsx
+++ b/packages/components/tests/message-selection.test.tsx
@@ -86,7 +86,7 @@ describe('chat message selection', () => {
     await click('Question');
     await click('Preview image');
     expect(container.querySelector('output')?.textContent).toBe('user,assistant');
-    expect(container.querySelectorAll('[role="checkbox"][data-state="checked"]')).toHaveLength(2);
+    expect(container.querySelectorAll('[role="checkbox"][data-checked]')).toHaveLength(2);
     await click('Answer');
     await click('Preview image');
     expect(container.querySelector('output')?.textContent).toBe('user');
@@ -98,7 +98,7 @@ describe('chat message selection', () => {
     await click('Preview image');
     expect(container.querySelector('output')?.textContent).toBe('user,assistant,followup');
     await click('Clear selection');
-    expect(container.querySelectorAll('[data-state="checked"]')).toHaveLength(0);
+    expect(container.querySelectorAll('[role="checkbox"][data-checked]')).toHaveLength(0);
     await click('Cancel');
     expect(container.querySelector('[role="checkbox"]')).toBeNull();
     await click('Start');
@@ -121,7 +121,7 @@ describe('chat message selection', () => {
     };
     const selectedIds = () =>
       [...container.querySelectorAll('[data-message-selection-id]')]
-        .filter((element) => element.querySelector('[role="checkbox"][data-state="checked"]'))
+        .filter((element) => element.querySelector('[role="checkbox"][data-checked]'))
         .map((element) => element.getAttribute('data-message-selection-id'));
 
     await pointer('user', 'pointerdown');
@@ -198,7 +198,7 @@ describe('chat message selection', () => {
         });
       }
       expect(container.scrollTop).toBeGreaterThan(0);
-      expect(container.querySelectorAll('[role="checkbox"][data-state="checked"]')).toHaveLength(3);
+      expect(container.querySelectorAll('[role="checkbox"][data-checked]')).toHaveLength(3);
       await act(async () => {
         window.dispatchEvent(new MouseEvent('pointerup'));
       });
diff --git a/packages/ui/AGENTS.md b/packages/ui/AGENTS.md
index f0ac1aad9..869666131 100644
--- a/packages/ui/AGENTS.md
+++ b/packages/ui/AGENTS.md
@@ -18,7 +18,11 @@ into one component at a time. Source-consumed; consumers compile it through
   component style.
 - A focus or invalid ring is a 2px `box-shadow` composed with the control's own
   shadow, never an `outline`: the product shell resets every outline with
-  `!important`, which no layer order overrides.
+  `!important`, which no layer order overrides. A control that changes its edge
+  with its state restates the ring with it; CSS cannot append to a box-shadow.
+- Checkbox, Radio and Switch render a real `<button>` through Base UI's
+  `nativeButton`, so `:disabled` and `:focus-visible` reach them the way they
+  reach an `<input>` and a `<label>` can point at them.
 - Controls in the field family read validity and disabled from `Field.Root`
   through Base UI's state callback on `className`. A control does not take its
   own `invalid` or `disabled` colour prop. The invalid ring also follows
@@ -36,7 +40,8 @@ into one component at a time. Source-consumed; consumers compile it through
   `src/theme/theme.tsx` so `ThemeRoot` applies it with every forced palette; a
   custom property declared only at the document root keeps the root palette
   inside a themed subtree. A family shares one group (`field` covers the label,
-  Input, Textarea, help and error) rather than one group per component.
+  Input, Textarea, Checkbox, Radio, Switch, help and error) rather than one
+  group per component.
 - `src/gallery` is the visual reference for the package. A new token, variant,
   size, tone or shape lands with its board entry in the same change, and the
   board reads sample values back off the rendered node instead of repeating a
diff --git a/packages/ui/README.md b/packages/ui/README.md
index cd43883df..bfb76e4cd 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -10,7 +10,7 @@ behavior.
 | `src/tokens`        | Semantic color, type, spacing, motion, radius, and elevation tokens |
 | `src/theme`         | Applies light or dark StyleX themes to a subtree                    |
 | `src/button`        | Base UI Button behavior and Lody variants, sizes, tones, and shapes |
-| `src/field`         | Base UI Field composition: label, Input, Textarea, help, and error  |
+| `src/field`         | Base UI Field composition: label, Input, Textarea, Checkbox, Radio, Switch, help, and error |
 | `src/gallery`       | The token board: every token and primitive state, in both palettes  |
 | `stylex-options.ts` | Shared compiler configuration for source-consuming hosts            |
 
@@ -21,7 +21,8 @@ primitive's visual rules.
 
 A field is a composition rather than one component: `Field.Root` owns the name,
 the disabled flag and validity, and `Field.Label`, `Input`, `Textarea`,
-`Field.Description` and `Field.Error` read that state from it.
+`Checkbox`, `Radio`, `Switch`, `Field.Description` and `Field.Error` read that
+state from it.
 
 ```tsx
 <Field.Root name="title" invalid={!title}>
@@ -32,8 +33,20 @@ the disabled flag and validity, and `Field.Label`, `Input`, `Textarea`,
 </Field.Root>
 ```
 
+`Checkbox`, `Radio` and `Switch` are the same well as a box: off is the well
+rung, on is ink. Each renders a real `<button>` with Base UI's hidden input
+beside it, so a `<label>` points at it and the family's `:disabled` and
+`:focus-visible` rules reach it without a second mechanism.
+
+```tsx
+<Field.Label>
+  <Checkbox name="notify" defaultChecked />
+  Notify me when the session finishes
+</Field.Label>
+```
+
 The state mapping every control in this family shares — rest, placeholder,
-focus, invalid, disabled, selected — is in
+focus, invalid, disabled, checked, selected — is in
 [token rules](src/tokens/RULES.md#fields).
 
 The intended behavior is specified in [Shared UI primitives](../../specs/ui-primitives.md).
diff --git a/packages/ui/package.json b/packages/ui/package.json
index e8c1dfa00..456ec9745 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -10,8 +10,11 @@
     "./tokens/scales.stylex": "./src/tokens/scales.stylex.ts",
     "./theme": "./src/theme/theme.tsx",
     "./button": "./src/button/button.tsx",
+    "./checkbox": "./src/field/checkbox.tsx",
     "./field": "./src/field/field.tsx",
     "./input": "./src/field/input.tsx",
+    "./radio": "./src/field/radio.tsx",
+    "./switch": "./src/field/switch.tsx",
     "./textarea": "./src/field/textarea.tsx",
     "./gallery": "./src/gallery/gallery.tsx"
   },
diff --git a/packages/ui/src/field/checkbox.tsx b/packages/ui/src/field/checkbox.tsx
new file mode 100644
index 000000000..9b67dae07
--- /dev/null
+++ b/packages/ui/src/field/checkbox.tsx
@@ -0,0 +1,101 @@
+import { Checkbox as BaseCheckbox } from '@base-ui/react/checkbox';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { field } from './field.tokens.stylex';
+import { isInvalid } from './invalid';
+import { well } from './well';
+
+type BaseProps = ComponentProps<typeof BaseCheckbox.Root>;
+
+export interface CheckboxProps extends Omit<
+  BaseProps,
+  'className' | 'render' | 'nativeButton' | 'style'
+> {
+  className?: string;
+}
+
+const styles = stylex.create({
+  box: {
+    width: field.boxSize,
+    height: field.boxSize,
+    borderRadius: field.boxRadius,
+  },
+  indicator: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    color: 'inherit',
+  },
+  mark: {
+    display: 'block',
+    width: field.markSize,
+    height: field.markSize,
+  },
+});
+
+/**
+ * The tick and the mixed-state dash. Drawn here rather than taken from an icon
+ * package because this package depends on React, Base UI and StyleX only.
+ */
+function CheckMark() {
+  return (
+    <svg {...stylex.props(styles.mark)} viewBox="0 0 10 10" fill="none" aria-hidden="true">
+      <path
+        d="M1.6 5.2 3.9 7.5 8.4 2.7"
+        stroke="currentColor"
+        strokeWidth="1.6"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}
+
+function MixedMark() {
+  return (
+    <svg {...stylex.props(styles.mark)} viewBox="0 0 10 10" fill="none" aria-hidden="true">
+      <path d="M2.2 5h5.6" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" />
+    </svg>
+  );
+}
+
+/**
+ * A checkbox in the field family: the well as a 16px box, ink once it holds a
+ * value. It renders a real `<button>` so the family's `:disabled` and
+ * `:focus-visible` rules reach it and a `<label>` can point at it, with Base
+ * UI's hidden input beside it carrying the value into a form.
+ */
+export const Checkbox = forwardRef<HTMLButtonElement, CheckboxProps>(function Checkbox(
+  { className, ...rest },
+  ref
+) {
+  const ariaInvalid = rest['aria-invalid'];
+  return (
+    <BaseCheckbox.Root
+      ref={ref}
+      nativeButton
+      render={<button type="button" />}
+      {...rest}
+      className={(state) => {
+        const on = state.checked || state.indeterminate;
+        return appendClassName(
+          stylex.props(
+            well.box,
+            styles.box,
+            on && well.checked,
+            isInvalid(state.valid, ariaInvalid) && (on ? well.checkedInvalid : well.invalid)
+          ).className,
+          className
+        );
+      }}
+    >
+      <BaseCheckbox.Indicator
+        className={stylex.props(styles.indicator).className}
+        render={(props, state) => (
+          <span {...props}>{state.indeterminate ? <MixedMark /> : <CheckMark />}</span>
+        )}
+      />
+    </BaseCheckbox.Root>
+  );
+});
diff --git a/packages/ui/src/field/field.tokens.stylex.ts b/packages/ui/src/field/field.tokens.stylex.ts
index 300d3a7a0..b2a2698a4 100644
--- a/packages/ui/src/field/field.tokens.stylex.ts
+++ b/packages/ui/src/field/field.tokens.stylex.ts
@@ -26,6 +26,18 @@ export const field = stylex.defineVars({
   gap: space[1.5],
   ringWidth: '2px',
   textareaMinHeight: '72px',
+  // A checkbox and a radio are the rules' "16px things", so they take the mini
+  // radius; a radio overrides it with a full round because it is a circle.
+  boxSize: '16px',
+  boxRadius: radius.mini,
+  // The tick and the dot inside that box, and the switch the same height as it
+  // so a settings row holding both lines up.
+  markSize: '10px',
+  dotSize: '6px',
+  switchWidth: '28px',
+  switchHeight: '16px',
+  switchThumbSize: '12px',
+  switchInset: '2px',
   // The rules put disabled at 45% opacity on the control. It is one value for
   // the whole family, so the control and its label cannot drift apart.
   disabledOpacity: '0.45',
@@ -38,6 +50,17 @@ export const field = stylex.defineVars({
   error: colors.destructive,
   ring: colors.accent,
   invalidRing: colors.destructive,
+  // Stored state is ink: the rules give a checked box and a switch that is on
+  // the `label` fill with `background` on top of it, the same pair the primary
+  // button uses, and the same ink edge as its top highlight. `accent` stays on
+  // live state and is not a fill.
+  checkedFill: colors.label,
+  checkedMark: colors.background,
+  checkedEdge: shadow.inkEdge,
+  // The switch thumb is raised on both tracks: it reads against the well when
+  // the switch is off and against the ink when it is on.
+  thumb: colors.raisedBackground,
+  thumbShadow: shadow.raised,
 });
 
 /**
@@ -55,4 +78,9 @@ export const fieldPaletteTheme = stylex.createTheme(field, {
   error: colors.destructive,
   ring: colors.accent,
   invalidRing: colors.destructive,
+  checkedFill: colors.label,
+  checkedMark: colors.background,
+  checkedEdge: shadow.inkEdge,
+  thumb: colors.raisedBackground,
+  thumbShadow: shadow.raised,
 });
diff --git a/packages/ui/src/field/radio.tsx b/packages/ui/src/field/radio.tsx
new file mode 100644
index 000000000..4b3309101
--- /dev/null
+++ b/packages/ui/src/field/radio.tsx
@@ -0,0 +1,87 @@
+import { Radio as BaseRadio } from '@base-ui/react/radio';
+import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
+import * as stylex from '@stylexjs/stylex';
+import { appendClassName } from '../internal/class-name';
+import { radius, space } from '../tokens/scales.stylex';
+import { field } from './field.tokens.stylex';
+import { isInvalid } from './invalid';
+import { well } from './well';
+
+export interface RadioProps extends Omit<
+  BaseRadio.Root.Props,
+  'className' | 'render' | 'nativeButton' | 'style'
+> {
+  className?: string;
+}
+
+export interface RadioGroupProps extends Omit<BaseRadioGroup.Props, 'className' | 'style'> {
+  className?: string;
+}
+
+const styles = stylex.create({
+  group: {
+    display: 'flex',
+    flexDirection: 'column',
+    // Options are rows of their own, not the lines of one field, so they sit a
+    // step further apart than `field.gap` stacks a label over its control.
+    gap: space[2],
+    minWidth: 0,
+  },
+  box: {
+    width: field.boxSize,
+    height: field.boxSize,
+    borderRadius: radius.full,
+  },
+  dot: {
+    display: 'block',
+    width: field.dotSize,
+    height: field.dotSize,
+    borderRadius: radius.full,
+    backgroundColor: 'currentColor',
+  },
+});
+
+/**
+ * A radio in the field family: the same well and ink as a Checkbox, round, with
+ * one option of a group selected at a time. It renders a real `<button>` for the
+ * same reasons a Checkbox does.
+ */
+export function Radio({ className, ...rest }: RadioProps) {
+  const ariaInvalid = rest['aria-invalid'];
+  return (
+    <BaseRadio.Root
+      nativeButton
+      render={<button type="button" />}
+      {...rest}
+      className={(state) =>
+        appendClassName(
+          stylex.props(
+            well.box,
+            styles.box,
+            state.checked && well.checked,
+            isInvalid(state.valid, ariaInvalid) &&
+              (state.checked ? well.checkedInvalid : well.invalid)
+          ).className,
+          className
+        )
+      }
+    >
+      <BaseRadio.Indicator className={stylex.props(styles.dot).className} />
+    </BaseRadio.Root>
+  );
+}
+
+/**
+ * Holds the group's name, value and disabled flag, so a `Radio` inside it takes
+ * only the value it stands for.
+ */
+export function RadioGroup({ className, ...rest }: RadioGroupProps) {
+  const sx = stylex.props(styles.group);
+  return (
+    <BaseRadioGroup
+      {...rest}
+      className={appendClassName(sx.className, className)}
+      style={sx.style}
+    />
+  );
+}
diff --git a/packages/ui/src/field/switch.tsx b/packages/ui/src/field/switch.tsx
new file mode 100644
index 000000000..6ba211007
--- /dev/null
+++ b/packages/ui/src/field/switch.tsx
@@ -0,0 +1,81 @@
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import * as stylex from '@stylexjs/stylex';
+import { forwardRef, type ComponentProps } from 'react';
+import { appendClassName } from '../internal/class-name';
+import { duration, ease, radius } from '../tokens/scales.stylex';
+import { field } from './field.tokens.stylex';
+import { isInvalid } from './invalid';
+import { well } from './well';
+
+type BaseProps = ComponentProps<typeof BaseSwitch.Root>;
+
+export interface SwitchProps extends Omit<
+  BaseProps,
+  'className' | 'render' | 'nativeButton' | 'style'
+> {
+  className?: string;
+}
+
+/** The distance the thumb travels: the track less the thumb and both insets. */
+const TRAVEL = `calc(${field.switchWidth} - ${field.switchThumbSize} - 2 * ${field.switchInset})`;
+
+const styles = stylex.create({
+  track: {
+    width: field.switchWidth,
+    height: field.switchHeight,
+    borderRadius: radius.full,
+    justifyContent: 'flex-start',
+    padding: field.switchInset,
+  },
+  thumb: {
+    display: 'block',
+    width: field.switchThumbSize,
+    height: field.switchThumbSize,
+    borderRadius: radius.full,
+    backgroundColor: field.thumb,
+    boxShadow: field.thumbShadow,
+    transform: 'translateX(0)',
+    transitionProperty: 'transform',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  thumbChecked: { transform: `translateX(${TRAVEL})` },
+});
+
+/**
+ * A switch in the field family: the well as a track, ink once it is on, with a
+ * raised thumb that reads against both. It renders a real `<button>` for the
+ * same reasons a Checkbox does.
+ */
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(
+  { className, ...rest },
+  ref
+) {
+  const ariaInvalid = rest['aria-invalid'];
+  return (
+    <BaseSwitch.Root
+      ref={ref}
+      nativeButton
+      render={<button type="button" />}
+      {...rest}
+      className={(state) =>
+        appendClassName(
+          stylex.props(
+            well.box,
+            styles.track,
+            state.checked && well.checked,
+            isInvalid(state.valid, ariaInvalid) &&
+              (state.checked ? well.checkedInvalid : well.invalid)
+          ).className,
+          className
+        )
+      }
+    >
+      <BaseSwitch.Thumb
+        className={(state) =>
+          stylex.props(styles.thumb, state.checked && styles.thumbChecked).className
+        }
+      />
+    </BaseSwitch.Root>
+  );
+});
diff --git a/packages/ui/src/field/well.ts b/packages/ui/src/field/well.ts
index dd7d1c6bb..fd0a211ae 100644
--- a/packages/ui/src/field/well.ts
+++ b/packages/ui/src/field/well.ts
@@ -4,10 +4,20 @@ import { field } from './field.tokens.stylex';
 
 /**
  * The resting and ringed appearance every control in the field family shares.
- * It lives here rather than on one control so Input, Textarea and the controls
- * that migrate next cannot each grow their own focus, invalid and disabled
- * treatment.
+ * It lives here rather than on one control so Input, Textarea, Checkbox, Radio,
+ * Switch and the controls that migrate next cannot each grow their own focus,
+ * invalid and disabled treatment.
+ *
+ * The ring rides in the same box-shadow as the control's own edge: 2px, tight
+ * to the control, no offset, no glow. It is not an `outline` because the app
+ * shell resets every outline with `!important`, which no layer order can beat.
+ * CSS cannot append to a box-shadow list, so a control that changes its edge —
+ * a checked box swaps the well for the ink highlight — restates the ring with
+ * it, the way each Button variant does.
  */
+const RING = `0 0 0 ${field.ringWidth} ${field.ring}`;
+const INVALID_RING = `0 0 0 ${field.ringWidth} ${field.invalidRing}`;
+
 export const well = stylex.create({
   base: {
     boxSizing: 'border-box',
@@ -17,14 +27,8 @@ export const well = stylex.create({
     borderWidth: 0,
     borderStyle: 'none',
     backgroundColor: field.background,
-    // The ring rides in the same box-shadow as the well: 2px, tight to the
-    // control, no offset, no glow. It is not an `outline` because the app shell
-    // resets every outline with `!important`, which no layer order can beat. A
-    // text control is always focus-visible, so this covers pointer focus too.
-    boxShadow: {
-      default: field.well,
-      ':focus-visible': `${field.well}, 0 0 0 ${field.ringWidth} ${field.ring}`,
-    },
+    // A text control is always focus-visible, so this covers pointer focus too.
+    boxShadow: { default: field.well, ':focus-visible': `${field.well}, ${RING}` },
     color: field.value,
     fontFamily: 'inherit',
     // Controls are 13 at weight 500 with controlTracking; the size step sets
@@ -45,8 +49,48 @@ export const well = stylex.create({
   // ring the moment it takes focus.
   invalid: {
     boxShadow: {
-      default: `${field.well}, 0 0 0 ${field.ringWidth} ${field.invalidRing}`,
-      ':focus-visible': `${field.well}, 0 0 0 ${field.ringWidth} ${field.invalidRing}`,
+      default: `${field.well}, ${INVALID_RING}`,
+      ':focus-visible': `${field.well}, ${INVALID_RING}`,
+    },
+  },
+  /**
+   * The same well as a box rather than a line of text: the tick box of a
+   * Checkbox and a Radio, and the track of a Switch. It takes no width, no font
+   * and no placeholder, and it carries the mark colour so an indicator inside
+   * it needs no colour of its own. These controls render a real `<button>`, so
+   * `:disabled` and `:focus-visible` reach them the way they reach an `<input>`.
+   */
+  box: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    boxSizing: 'border-box',
+    margin: 0,
+    padding: 0,
+    borderWidth: 0,
+    borderStyle: 'none',
+    backgroundColor: field.background,
+    boxShadow: { default: field.well, ':focus-visible': `${field.well}, ${RING}` },
+    color: field.checkedMark,
+    cornerShape: corner.shape,
+    outlineStyle: 'none',
+    opacity: { default: 1, ':disabled': field.disabledOpacity },
+    cursor: { default: 'pointer', ':disabled': 'default' },
+    transitionProperty: 'background-color, box-shadow, opacity',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: ease.standard,
+  },
+  /** Stored state: the ink fill and its top highlight in place of the well. */
+  checked: {
+    backgroundColor: field.checkedFill,
+    boxShadow: { default: field.checkedEdge, ':focus-visible': `${field.checkedEdge}, ${RING}` },
+  },
+  /** The invalid ring on that ink edge, at rest and while focused. */
+  checkedInvalid: {
+    boxShadow: {
+      default: `${field.checkedEdge}, ${INVALID_RING}`,
+      ':focus-visible': `${field.checkedEdge}, ${INVALID_RING}`,
     },
   },
 });
diff --git a/packages/ui/src/gallery/gallery.tsx b/packages/ui/src/gallery/gallery.tsx
index 37c2e1048..3e62bdc12 100644
--- a/packages/ui/src/gallery/gallery.tsx
+++ b/packages/ui/src/gallery/gallery.tsx
@@ -2,9 +2,12 @@ import * as stylex from '@stylexjs/stylex';
 import { Fragment, type ReactNode } from 'react';
 import { Button } from '../button/button';
 import { button } from '../button/button.tokens.stylex';
+import { Checkbox } from '../field/checkbox';
 import { Field } from '../field/field';
 import { field } from '../field/field.tokens.stylex';
 import { Input } from '../field/input';
+import { Radio, RadioGroup } from '../field/radio';
+import { Switch } from '../field/switch';
 import { Textarea } from '../field/textarea';
 import { colors, shadow } from '../tokens/colors.stylex';
 import { control, corner, duration, ease, radius, space, text, z } from '../tokens/scales.stylex';
@@ -405,6 +408,12 @@ const FIELD_COLORS = [
   { name: 'field.invalidRing', value: field.invalidRing, note: 'invalid' },
 ];
 
+const CHOICE_COLORS = [
+  { name: 'field.checkedFill', value: field.checkedFill, note: 'a control that holds a value' },
+  { name: 'field.checkedMark', value: field.checkedMark, note: 'the tick and the dot on it' },
+  { name: 'field.thumb', value: field.thumb, note: 'the switch thumb, on both tracks' },
+];
+
 const FIELD_SIZES = [
   { name: 'small · 28', size: 'small' as const },
   { name: 'medium · 32', size: 'medium' as const },
@@ -574,6 +583,53 @@ function InvalidFieldRow() {
   );
 }
 
+/** A choice control with the label it belongs to, the way a surface writes it. */
+function ChoiceRow({
+  legend,
+  readout,
+  children,
+}: {
+  legend: string;
+  readout?: string;
+  children: ReactNode;
+}) {
+  return (
+    <Row>
+      <LegendKey>{legend}</LegendKey>
+      <Cluster>{children}</Cluster>
+      {readout ? <span {...stylex.props(styles.readout)}>{readout}</span> : null}
+    </Row>
+  );
+}
+
+function CheckedInkRow() {
+  const { ref, value } = useMeasured<HTMLButtonElement>('box-shadow');
+  return (
+    <ChoiceRow legend={'checked \u00b7 ink edge'} readout={value}>
+      <Field.Label>
+        <Checkbox ref={ref} defaultChecked />
+        Include diffs
+      </Field.Label>
+    </ChoiceRow>
+  );
+}
+
+function SwitchTrackRow() {
+  const { ref, value } = useMeasured<HTMLButtonElement>('width');
+  return (
+    <ChoiceRow legend="switch" readout={value}>
+      <Field.Label>
+        <Switch ref={ref} />
+        Auto review
+      </Field.Label>
+      <Field.Label>
+        <Switch defaultChecked />
+        Auto review
+      </Field.Label>
+    </ChoiceRow>
+  );
+}
+
 function ButtonFocusRow() {
   const { ref, value } = useMeasured<HTMLDivElement>('box-shadow');
   return (
@@ -989,6 +1045,84 @@ export function UiGallery({ palettes = 'both' }: UiGalleryProps) {
           </Rows>
         </PaletteSplit>
       </Section>
+
+      <Section
+        title="Field · Checkbox, Radio, Switch"
+        rule="The same well, ring and disabled treatment as the text controls, drawn as a 16px box and a 28px track. Stored state is ink: the label fill with the background mark and the primary button's own top highlight, because accent stays on live state and is never a fill. A mixed box announces mixed and draws the dash rather than falling back to a tick it does not hold."
+      >
+        <PaletteSplit palettes={palettes}>
+          <Rows>
+            <ChoiceRow legend="checkbox">
+              <Field.Label>
+                <Checkbox />
+                Include diffs
+              </Field.Label>
+              <Field.Label>
+                <Checkbox indeterminate />
+                Some files
+              </Field.Label>
+            </ChoiceRow>
+            <CheckedInkRow />
+            <ChoiceRow legend={'checkbox \u00b7 invalid'}>
+              <Field.Root invalid>
+                <Field.Label>
+                  <Checkbox />
+                  Accept the terms
+                </Field.Label>
+                <Field.Error match>Tick this to continue.</Field.Error>
+              </Field.Root>
+            </ChoiceRow>
+            <ChoiceRow legend={'checkbox \u00b7 disabled'}>
+              <Field.Root disabled>
+                <Field.Label>
+                  <Checkbox defaultChecked />
+                  Include diffs
+                </Field.Label>
+              </Field.Root>
+            </ChoiceRow>
+            <ChoiceRow legend="radio">
+              <RadioGroup name="gallery-review" defaultValue="ask">
+                <Field.Label>
+                  <Radio value="ask" />
+                  Ask before reviewing
+                </Field.Label>
+                <Field.Label>
+                  <Radio value="auto" />
+                  Review every push
+                </Field.Label>
+              </RadioGroup>
+            </ChoiceRow>
+            <SwitchTrackRow />
+            <ChoiceRow legend={'switch \u00b7 disabled'}>
+              <Field.Root disabled>
+                <Field.Label>
+                  <Switch defaultChecked />
+                  Auto review
+                </Field.Label>
+              </Field.Root>
+            </ChoiceRow>
+          </Rows>
+          <Grid>
+            {CHOICE_COLORS.map((token) => (
+              <Swatch key={token.name} {...token} />
+            ))}
+            <ShadowChip
+              name="field.checkedEdge"
+              box={field.checkedEdge}
+              fill={field.checkedFill}
+              ink
+              note="the ink highlight a checked control carries"
+            />
+            <ShadowChip
+              name="field.thumbShadow"
+              box={field.thumbShadow}
+              fill={field.thumb}
+              ink={false}
+              note="the thumb is raised on both tracks"
+            />
+          </Grid>
+        </PaletteSplit>
+      </Section>
     </Board>
   );
 }
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 7fe78609d..947c4002f 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -6,6 +6,8 @@ export type {
   ButtonTone,
   ButtonVariant,
 } from './button/button';
+export { Checkbox } from './field/checkbox';
+export type { CheckboxProps } from './field/checkbox';
 export { Field } from './field/field';
 export type {
   FieldDescriptionProps,
@@ -16,6 +18,10 @@ export type {
 } from './field/field';
 export { Input } from './field/input';
 export type { InputProps, InputSize } from './field/input';
+export { Radio, RadioGroup } from './field/radio';
+export type { RadioGroupProps, RadioProps } from './field/radio';
+export { Switch } from './field/switch';
+export type { SwitchProps } from './field/switch';
 export { Textarea } from './field/textarea';
 export type { TextareaProps, TextareaResize } from './field/textarea';
 export { ThemeRoot, forcedThemeClassNames } from './theme/theme';
diff --git a/packages/ui/src/tokens/RULES.md b/packages/ui/src/tokens/RULES.md
index da84c5e82..a16ade175 100644
--- a/packages/ui/src/tokens/RULES.md
+++ b/packages/ui/src/tokens/RULES.md
@@ -44,17 +44,32 @@ One rung per component. The rung fixes background and shadow together.
 
 A control is the well rung: `wellBackground` plus `shadow.inset`, never a
 border. One component token group, `field`, serves the whole family — input,
-textarea, and the selects, checkboxes and switches that follow — so a state has
+textarea, checkbox, radio, switch, and the selects that follow — so a state has
 one colour in one place instead of one per component.
 
-| state       | what it is                                                        |
-| ----------- | ----------------------------------------------------------------- |
-| rest        | `field.background` and `field.well`; the value in `field.value`   |
-| placeholder | `field.placeholder`, the hint colour; it is a prompt, not a label |
-| focus       | 2px `field.ring` (accent), tight to the control, no offset        |
-| invalid     | 2px `field.invalidRing` (destructive), at rest and while focused  |
-| disabled    | 45% opacity on the control; the label and help dim with it        |
-| selected    | `selectedFill` on the row that is current, not on the control     |
+| state       | what it is                                                                     |
+| ----------- | ------------------------------------------------------------------------------ |
+| rest        | `field.background` and `field.well`; the value in `field.value`                |
+| placeholder | `field.placeholder`, the hint colour; it is a prompt, not a label              |
+| focus       | 2px `field.ring` (accent), tight to the control, no offset                     |
+| invalid     | 2px `field.invalidRing` (destructive), at rest and while focused               |
+| disabled    | 45% opacity on the control; the label and help dim with it                     |
+| checked, on | ink: `field.checkedFill` under `field.checkedMark`, `field.checkedEdge` on top |
+| mixed       | the checked appearance with the dash, and it announces `mixed`                 |
+| selected    | `selectedFill` on the row that is current, not on the control                  |
+
+A checkbox and a radio are the "16px things" the corner rule names: a
+`field.boxSize` box at `radius.mini`, round for a radio. A switch is a
+`field.switchWidth` by `field.switchHeight` track at `radius.full` holding a
+`field.thumb` thumb raised with `field.thumbShadow`, the same height as the box
+so a settings row carrying both lines up. Off is the well; on is the ink, which
+is where the well's shadow gives way to `field.checkedEdge`. Because CSS cannot
+append to a box-shadow list, a control that changes its edge restates the ring
+with it, the way each Button variant does.
+
+These three render a real `<button>` with Base UI's hidden input beside it, so
+`:disabled` and `:focus-visible` reach them the way they reach an `<input>` and
+a `<label>` can point at them.
 
 The control's own text follows the control rule at every size on the ladder: 13
 at weight 500 with `text.controlTracking`. Label at 12 weight 500 in
diff --git a/packages/ui/test/gallery.test.tsx b/packages/ui/test/gallery.test.tsx
index 15c910950..b610e9cf3 100644
--- a/packages/ui/test/gallery.test.tsx
+++ b/packages/ui/test/gallery.test.tsx
@@ -84,6 +84,26 @@ describe('UiGallery', () => {
     }
   });
 
+  test('shows the choice controls: every state of each, and their own tokens', () => {
+    expect(board).toContain('role="checkbox"');
+    expect(board).toContain('role="radiogroup"');
+    expect(board).toContain('role="switch"');
+    // Base UI marks these on the rendered control, so their presence is the
+    // state reaching it rather than the board describing it.
+    expect(board).toContain('aria-checked="mixed"');
+    expect(board).toContain('data-checked=""');
+    expect(board).toContain('data-unchecked=""');
+    for (const name of [
+      'field.checkedFill',
+      'field.checkedMark',
+      'field.checkedEdge',
+      'field.thumb',
+      'field.thumbShadow',
+    ]) {
+      expect(board, `${name} is missing from the board`).toContain(name);
+    }
+  });
+
   test('renders one palette when asked for one', () => {
     const light = renderToStaticMarkup(<UiGallery palettes="light" />);
     expect(light).toContain('Lody Light');
diff --git a/packages/ui/test/toggles.test.tsx b/packages/ui/test/toggles.test.tsx
new file mode 100644
index 000000000..a1916811c
--- /dev/null
+++ b/packages/ui/test/toggles.test.tsx
@@ -0,0 +1,192 @@
+import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, test } from 'vitest';
+import { Checkbox } from '../src/field/checkbox';
+import { Field } from '../src/field/field';
+import { Input } from '../src/field/input';
+import { Radio, RadioGroup } from '../src/field/radio';
+import { Switch } from '../src/field/switch';
+
+function classesOf(html: string, tag: string, occurrence = 0): string[] {
+  const open = html.match(new RegExp(`<${tag}\\b[^>]*>`, 'g'))?.[occurrence] ?? '';
+  return (/class="([^"]*)"/.exec(open)?.[1] ?? '').split(' ').filter(Boolean);
+}
+
+function attrOf(html: string, tag: string, attribute: string): string | undefined {
+  const open = new RegExp(`<${tag}\\b[^>]*>`).exec(html)?.[0] ?? '';
+  return new RegExp(`${attribute}="([^"]*)"`).exec(open)?.[1];
+}
+
+/** What the invalid ring adds to a text control, derived rather than written down. */
+const RING_CLASSES = (() => {
+  const valid = classesOf(renderToStaticMarkup(<Input />), 'input');
+  const invalid = classesOf(renderToStaticMarkup(<Input aria-invalid="true" />), 'input');
+  return invalid.filter((name) => !valid.includes(name));
+})();
+
+describe('Checkbox', () => {
+  test('renders a real button carrying the checkbox role, with a hidden input beside it', () => {
+    const html = renderToStaticMarkup(<Checkbox name="notify" />);
+    expect(html).toMatch(/^<button type="button"/);
+    expect(html).toContain('role="checkbox"');
+    expect(html).toContain('aria-checked="false"');
+    expect(html).toContain('<input');
+    expect(html).toContain('type="checkbox"');
+  });
+
+  test('the tick appears only once the box holds a value', () => {
+    expect(renderToStaticMarkup(<Checkbox />)).not.toContain('<svg');
+    expect(renderToStaticMarkup(<Checkbox defaultChecked />)).toContain('<svg');
+  });
+
+  test('a mixed box announces mixed and draws the dash instead of the tick', () => {
+    const mixed = renderToStaticMarkup(<Checkbox indeterminate />);
+    expect(mixed).toContain('aria-checked="mixed"');
+    // The tick is a polyline and the dash a single horizontal run; the mixed box
+    // must not fall back to the tick, which would state a value it does not hold.
+    expect(mixed).toContain('d="M2.2 5h5.6"');
+    expect(mixed).not.toContain('d="M1.6 5.2 3.9 7.5 8.4 2.7"');
+  });
+
+  test('a mixed box wears the same ink as a checked one', () => {
+    const checked = classesOf(renderToStaticMarkup(<Checkbox defaultChecked />), 'button');
+    const mixed = classesOf(renderToStaticMarkup(<Checkbox indeterminate />), 'button');
+    expect(mixed).toEqual(checked);
+  });
+
+  test('checked swaps the well for the ink fill rather than adding to it', () => {
+    const off = classesOf(renderToStaticMarkup(<Checkbox />), 'button');
+    const on = classesOf(renderToStaticMarkup(<Checkbox defaultChecked />), 'button');
+    expect(on.filter((name) => !off.includes(name)).length).toBeGreaterThan(0);
+    expect(off.filter((name) => !on.includes(name)).length).toBeGreaterThan(0);
+  });
+});
+
+describe('Switch', () => {
+  test('renders a real button carrying the switch role', () => {
+    const html = renderToStaticMarkup(<Switch name="beta" />);
+    expect(html).toMatch(/^<button type="button"/);
+    expect(html).toContain('role="switch"');
+    expect(html).toContain('aria-checked="false"');
+  });
+
+  test('the thumb differs between the two tracks by its travel alone', () => {
+    const off = classesOf(renderToStaticMarkup(<Switch />), 'span');
+    const on = classesOf(renderToStaticMarkup(<Switch defaultChecked />), 'span');
+    // One class swaps for one class: the resting transform for the travelled
+    // one. Anything more would be the thumb restyling itself per state.
+    expect(on.filter((name) => !off.includes(name))).toHaveLength(1);
+    expect(off.filter((name) => !on.includes(name))).toHaveLength(1);
+  });
+});
+
+describe('RadioGroup', () => {
+  const group = (
+    <RadioGroup name="mode" defaultValue="ask">
+      <Radio value="ask" />
+      <Radio value="auto" />
+    </RadioGroup>
+  );
+
+  test('the group and its options carry the roles a screen reader needs', () => {
+    const html = renderToStaticMarkup(group);
+    expect(html).toContain('role="radiogroup"');
+    expect(html.match(/role="radio"/g)).toHaveLength(2);
+    expect(html).toContain('aria-checked="true"');
+    expect(html).toContain('aria-checked="false"');
+  });
+
+  test('only the selected option shows its dot', () => {
+    const html = renderToStaticMarkup(group);
+    expect(html.match(/<span/g)).toHaveLength(1);
+  });
+
+  test('the group submits one name for every option', () => {
+    const html = renderToStaticMarkup(group);
+    expect(html.match(/name="mode"/g)).toHaveLength(2);
+    expect(html.match(/value="ask"|value="auto"/g)).toHaveLength(2);
+  });
+});
+
+describe('the family the three join', () => {
+  test('they share the box styles rather than each defining their own', () => {
+    const checkbox = classesOf(renderToStaticMarkup(<Checkbox />), 'button');
+    const radio = classesOf(
+      renderToStaticMarkup(
+        <RadioGroup name="mode">
+          <Radio value="ask" />
+        </RadioGroup>
+      ),
+      'button'
+    );
+    const toggle = classesOf(renderToStaticMarkup(<Switch />), 'button');
+    const shared = checkbox.filter((name) => radio.includes(name) && toggle.includes(name));
+    expect(shared.length).toBeGreaterThan(10);
+  });
+
+  test('an unchecked control wears the same invalid ring as a text control', () => {
+    expect(RING_CLASSES.length).toBeGreaterThan(0);
+    for (const control of [
+      <Checkbox key="c" aria-invalid="true" />,
+      <Switch key="s" aria-invalid="true" />,
+    ]) {
+      const cls = classesOf(renderToStaticMarkup(control), 'button');
+      expect(RING_CLASSES.every((name) => cls.includes(name))).toBe(true);
+    }
+  });
+
+  test('a checked control keeps the invalid ring on its own ink edge', () => {
+    const checked = classesOf(renderToStaticMarkup(<Checkbox defaultChecked />), 'button');
+    const invalid = classesOf(
+      renderToStaticMarkup(<Checkbox defaultChecked aria-invalid="true" />),
+      'button'
+    );
+    const added = invalid.filter((name) => !checked.includes(name));
+    expect(added.length).toBeGreaterThan(0);
+    // The ring is composed with the ink edge, so it cannot be the class a
+    // welled control uses; a checked box that reused it would lose its edge.
+    expect(added.some((name) => RING_CLASSES.includes(name))).toBe(false);
+  });
+
+  test('the field owns disabled, validity and the label association', () => {
+    const html = renderToStaticMarkup(
+      <Field.Root name="notify" disabled>
+        <Field.Label>
+          Notify me
+          <Checkbox />
+        </Field.Label>
+      </Field.Root>
+    );
+    // A native button takes the disabled attribute, so the same `:disabled`
+    // rule that dims an Input dims these without a second mechanism.
+    expect(html).toContain('disabled=""');
+    expect(attrOf(html, 'label', 'for')).toBe(attrOf(html, 'button', 'id'));
+  });
+
+  test('a field marked invalid rings the control without the caller repeating it', () => {
+    expect(RING_CLASSES.length).toBeGreaterThan(0);
+    const html = renderToStaticMarkup(
+      <Field.Root name="notify" invalid>
+        <Checkbox />
+      </Field.Root>
+    );
+    expect(html).toContain('aria-invalid="true"');
+    expect(RING_CLASSES.every((name) => classesOf(html, 'button').includes(name))).toBe(true);
+  });
+
+  test('a caller className lands after the compiled classes', () => {
+    for (const [control, tag] of [
+      [<Checkbox key="c" className="mt-1" />, 'button'],
+      [<Switch key="s" className="mt-1" />, 'button'],
+      [
+        <RadioGroup key="g" name="mode">
+          <Radio value="ask" className="mt-1" />
+        </RadioGroup>,
+        'button',
+      ],
+    ] as const) {
+      const cls = classesOf(renderToStaticMarkup(control), tag);
+      expect(cls[cls.length - 1]).toBe('mt-1');
+      expect(cls.length).toBeGreaterThan(5);
+    }
+  });
+});
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index e1bdc2d31..3b511fcbd 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -963,9 +963,6 @@ importers:
       '@radix-ui/react-alert-dialog':
         specifier: ^1.1.14
         version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-checkbox':
-        specifier: ^1.3.2
-        version: 1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-collapsible':
         specifier: ^1.1.12
         version: 1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -984,9 +981,6 @@ importers:
       '@radix-ui/react-popover':
         specifier: ^1.0.7
         version: 1.1.15(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-radio-group':
-        specifier: ^1.3.7
-        version: 1.3.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-scroll-area':
         specifier: ^1.2.9
         version: 1.2.10(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -999,9 +993,6 @@ importers:
       '@radix-ui/react-slot':
         specifier: ^1.2.4
         version: 1.2.4(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-switch':
-        specifier: ^1.0.3
-        version: 1.2.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       '@radix-ui/react-tabs':
         specifier: ^1.0.4
         version: 1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
@@ -4228,19 +4219,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-checkbox@1.3.3':
-    resolution: {integrity: sha512-wBbpv+NQftHDdG86Qc0pIyXk5IR3tM8Vd0nWLKDcX8nNn4nXFOFwsKuqw2okA/1D/mpaAkmuyndrPJTYDNZtFw==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-collapsible@1.1.12':
     resolution: {integrity: sha512-Uu+mSh4agx2ib1uIGPP4/CKNULyajb3p92LsVXmH2EHVMTfZWpll88XJ0j4W0z3f8NK1eYl1+Mf/szHPmcHzyA==}
     peerDependencies:
@@ -4448,7 +4426,6 @@ packages:
       '@types/react':
         optional: true
 
-
   '@radix-ui/react-menu@2.1.16':
     resolution: {integrity: sha512-72F2T+PLlphrqLcAotYPp0uJMr5SjP5SL01wfEspJbru5Zs5vQaSHb4VB3ZMJPimgHHCHG7gMOeOB9H3Hdmtxg==}
     peerDependencies:
@@ -4618,19 +4595,6 @@ packages:
       '@types/react-dom':
         optional: true
 
-  '@radix-ui/react-radio-group@1.3.8':
-    resolution: {integrity: sha512-VBKYIYImA5zsxACdisNQ3BjCBfmbGH3kQlnFVqlWU4tXwjy7cGX8ta80BcrO+WJXIn5iBylEH3K6ZTlee//lgQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-roving-focus@1.1.11':
     resolution: {integrity: sha512-7A6S9jSgm/S+7MdtNDSb+IU859vQqJ/QAtcYQcfFC6W8RS4IxIZDldLR0xqCFZ6DCyrQLjLPsxtTNch5jVA4lA==}
     peerDependencies:
@@ -4732,19 +4696,6 @@ packages:
       '@types/react':
         optional: true
 
-  '@radix-ui/react-switch@1.2.6':
-    resolution: {integrity: sha512-bByzr1+ep1zk4VubeEVViV592vu2lHE2BZY5OnzehZqOOgogN80+mNtCqPkhn2gklJqOpxWgPoYTSnhBCqpOXQ==}
-    peerDependencies:
-      '@types/react': '*'
-      '@types/react-dom': '*'
-      react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-      react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc
-    peerDependenciesMeta:
-      '@types/react':
-        optional: true
-      '@types/react-dom':
-        optional: true
-
   '@radix-ui/react-tabs@1.1.13':
     resolution: {integrity: sha512-7xdcatg7/U+7+Udyoj2zodtI9H/IIopqo+YOIcZOq1nJwXWBZ9p8xiu5llXlekDbZkca79a/fozEYQXIA4sW6A==}
     peerDependencies:
@@ -15970,22 +15921,6 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-checkbox@1.3.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
   '@radix-ui/react-collapsible@1.1.12(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -16354,24 +16289,6 @@ snapshots:
       '@types/react': 19.2.17
       '@types/react-dom': 19.2.3(@types/react@19.2.17)
 
-  '@radix-ui/react-radio-group@1.3.8(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-direction': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-presence': 1.1.5(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-roving-focus': 1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
   '@radix-ui/react-roving-focus@1.1.11(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
@@ -16489,21 +16406,6 @@ snapshots:
     optionalDependencies:
       '@types/react': 19.2.17
 
-  '@radix-ui/react-switch@1.2.6(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
-    dependencies:
-      '@radix-ui/primitive': 1.1.3
-      '@radix-ui/react-compose-refs': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-context': 1.1.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-primitive': 2.1.3(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
-      '@radix-ui/react-use-controllable-state': 1.2.2(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-previous': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      '@radix-ui/react-use-size': 1.1.1(@types/react@19.2.17)(react@19.2.0)
-      react: 19.2.0
-      react-dom: 19.2.0(react@19.2.0)
-    optionalDependencies:
-      '@types/react': 19.2.17
-      '@types/react-dom': 19.2.3(@types/react@19.2.17)
-
   '@radix-ui/react-tabs@1.1.13(@types/react-dom@19.2.3(@types/react@19.2.17))(@types/react@19.2.17)(react-dom@19.2.0(react@19.2.0))(react@19.2.0)':
     dependencies:
       '@radix-ui/primitive': 1.1.3
diff --git a/specs/ui-primitives.md b/specs/ui-primitives.md
index 36f7fd785..df58eaa51 100644
--- a/specs/ui-primitives.md
+++ b/specs/ui-primitives.md
@@ -25,9 +25,9 @@ control's name, whether it is disabled, and whether it is valid; the label, the
 control, the help text, and the error message read that state from the root
 instead of receiving their own copies of it. A caller therefore states a field is
 invalid in one place, and cannot leave a control and its message disagreeing.
-The composition provides a text input in small, medium, and large sizes and a
-multi-line control, and associates the label with the control without the caller
-naming an identifier.
+The composition provides a text input in small, medium, and large sizes, a
+multi-line control, a checkbox, a group of radio options, and a switch, and
+associates the label with the control without the caller naming an identifier.
 
 Every control in this family shares one set of state appearances: a sunken
 resting surface with no border, a placeholder in the hint colour, an accent ring
@@ -36,6 +36,14 @@ focused, and reduced opacity on the whole control when disabled. The states are
 defined once for the family, so a control added later inherits them rather than
 choosing its own.
 
+A control that stores a value — a ticked checkbox, the selected radio option, a
+switch that is on — shows that as ink, because the accent colour marks live
+state rather than a stored one. A checkbox can also stand for a partial
+selection, which it announces as mixed rather than as ticked. Each of these
+controls is a button to the platform: the keyboard reaches it, a screen reader
+is told which kind of control it is and whether it holds a value, and a form
+receives that value under the name the field root gave it.
+
 Product surfaces own workflows, placement, responsive layout, and accessibility
 requirements. They may add layout or interaction classes when a local constraint
 cannot be expressed by the primitive, such as a 44 px touch target in the Mermaid
@@ -87,3 +95,6 @@ The gallery and the subtree palette behavior are recorded in the
 The field composition, the state mapping it settles, and the outstanding focus
 ring suppression in the desktop shell are recorded in the
 [UI field primitives note](../.agents/notes/implemented/feature/2026-09-09-ui-field-primitives.md).
+The checkbox, radio and switch that join that family, and the ink they use for a
+stored value, are recorded in the
+[UI choice controls note](../.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md).

From 89f6583d754f9510729ed8d2ea3129d9e487fc95 Mon Sep 17 00:00:00 2001
From: Claude Code <noreply@github.com>
Date: Thu, 10 Sep 2026 04:02:28 +0000
Subject: [PATCH 2/6] fix: add PointerEvent polyfill and act import to Switch
 component tests

The new @lody/ui Switch component uses Base UI React's Switch, which depends
on PointerEvent in the dispatchClickWithModifiers handler. Tests interacting
with Switch components need a PointerEvent polyfill in jsdom.

- Add TestPointerEvent class to both test files
- Install PointerEvent polyfill in beforeEach
- Import act from react-dom/client for consistency with React 19
- Fixes CI test failures in mobile-about-developer-mode and tasks-beta-gate

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../tests/mobile-about-developer-mode.test.tsx  | 17 +++++++++++++++--
 .../components/tests/tasks-beta-gate.test.tsx   | 17 +++++++++++++++--
 2 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/packages/components/tests/mobile-about-developer-mode.test.tsx b/packages/components/tests/mobile-about-developer-mode.test.tsx
index 5ca593c63..6c6249cf4 100644
--- a/packages/components/tests/mobile-about-developer-mode.test.tsx
+++ b/packages/components/tests/mobile-about-developer-mode.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
-import { act } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
+import React from 'react';
+import { act, createRoot, type Root } from 'react-dom/client';
 import { createStore, Provider } from 'jotai';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
@@ -18,6 +18,15 @@ import { initI18n } from '../src/i18n';
   globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
 ).IS_REACT_ACT_ENVIRONMENT = true;
 
+class TestPointerEvent extends MouseEvent {
+  readonly pointerType: string;
+
+  constructor(type: string, init: MouseEventInit & { pointerType?: string } = {}) {
+    super(type, init);
+    this.pointerType = init.pointerType ?? '';
+  }
+}
+
 let container: HTMLDivElement;
 let root: Root;
 
@@ -49,6 +58,10 @@ function switchLabelled(label: string): HTMLButtonElement | null {
 }
 
 beforeEach(async () => {
+  Object.defineProperty(globalThis, 'PointerEvent', {
+    configurable: true,
+    value: TestPointerEvent,
+  });
   localStorage.clear();
   await initI18n();
   container = document.createElement('div');
diff --git a/packages/components/tests/tasks-beta-gate.test.tsx b/packages/components/tests/tasks-beta-gate.test.tsx
index 635f3f77a..20891a7b7 100644
--- a/packages/components/tests/tasks-beta-gate.test.tsx
+++ b/packages/components/tests/tasks-beta-gate.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
-import { act } from 'react';
-import { createRoot, type Root } from 'react-dom/client';
+import React from 'react';
+import { act, createRoot, type Root } from 'react-dom/client';
 import { createStore, Provider, useAtomValue } from 'jotai';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
@@ -17,10 +17,23 @@ import { initI18n } from '../src/i18n';
   globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }
 ).IS_REACT_ACT_ENVIRONMENT = true;
 
+class TestPointerEvent extends MouseEvent {
+  readonly pointerType: string;
+
+  constructor(type: string, init: MouseEventInit & { pointerType?: string } = {}) {
+    super(type, init);
+    this.pointerType = init.pointerType ?? '';
+  }
+}
+
 let container: HTMLDivElement;
 let root: Root;
 
 beforeEach(async () => {
+  Object.defineProperty(globalThis, 'PointerEvent', {
+    configurable: true,
+    value: TestPointerEvent,
+  });
   // Both atoms are localStorage-backed, so a fresh jotai store is not a fresh
   // gate — it rehydrates whatever the previous test persisted.
   localStorage.clear();

From 290390fa2d1cfcf4f72629bda3bd3f8b9f35e7a0 Mon Sep 17 00:00:00 2001
From: Wibus <62133302+wibus-wee@users.noreply.github.com>
Date: Thu, 10 Sep 2026 04:28:30 +0000
Subject: [PATCH 3/6] fix(ui): give pills the round corner shape, not the
 squircle

The switch track shipped as a rounded rectangle. `well.box` puts
`corner-shape: squircle` on every control in the family, and the track, the radio
and Button's pill then set `border-radius: radius.full` expecting a stadium or a
circle. A squircle does not degrade to one as the radius grows: it draws a
superellipse at that radius, so a 28x16 track becomes a rounded rectangle and a
16px box becomes a squircle rather than a circle. Measured in Chromium against
`corner-shape: round` at the same radius, the two are plainly different shapes.

The corner rule said `corner.shape` rides along with every radius, which was
written before anything used `radius.full`. Add `corner.round` beside
`corner.shape` and give `radius.full` the exception in RULES.md and AGENTS.md:
that radius means a pill or a circle, and only the round shape draws one. The
switch track and the radio box take it; the thumb and the dot never needed it,
because `corner-shape` does not inherit and their default is already round.

Button's pill carried the same defect from the start and is fixed with them. The
gallery's `radius.full` chip did too, so the board was drawing a rounded
rectangle under the label "pills"; it now shows the round shape beside the four
squircles, and the Corners rule states the exception.

Three tests pin it, deriving both expected classes from StyleX rather than
writing them down: the switch and the radio carry the round class and not the
squircle, the checkbox keeps the squircle at its 5px radius, and the two classes
differ at all.

Model: claude-opus-5[1m]

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../feature/2026-09-10-ui-choice-controls.md  | 35 +++++++++++++-
 packages/ui/AGENTS.md                         |  4 +-
 packages/ui/src/button/button.tsx             |  4 +-
 packages/ui/src/field/radio.tsx               |  5 +-
 packages/ui/src/field/switch.tsx              |  4 +-
 packages/ui/src/gallery/gallery.tsx           | 43 +++++++++++++----
 packages/ui/src/gallery/parts.tsx             |  2 +-
 packages/ui/src/tokens/RULES.md               |  6 ++-
 packages/ui/src/tokens/scales.stylex.ts       |  4 ++
 packages/ui/test/toggles.test.tsx             | 46 +++++++++++++++++++
 10 files changed, 137 insertions(+), 16 deletions(-)

diff --git a/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md b/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md
index 9d04b35c6..cfec0c7ee 100644
--- a/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md
+++ b/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md
@@ -163,6 +163,36 @@ Spending the contract on real call sites found three classes of caller state:
 `message-selection`'s tests read `[data-state="checked"]`, which is Radix's
 attribute; Base UI writes `data-checked`. The four assertions moved with it.
 
+## Correction: a squircle at `radius.full` is not a pill
+
+The first version of this change gave the switch track and the radio
+`radius.full` and left them under the squircle every control in `well.box`
+carries, on the reading that the corner rule's "`corner.shape` on every radius"
+covers the whole scale. It does not, and the result shipped visibly wrong: the
+28×16 track rendered as a rounded rectangle rather than a stadium.
+
+`corner-shape: squircle` does not degrade to a circle as the radius grows. It
+draws a superellipse of that radius, so at `radius.full` a wide box becomes a
+rounded rectangle and a square one becomes a squircle instead of a circle.
+Measured in Chromium against `corner-shape: round` at the same radius, the two
+are plainly different shapes at 28×16, at 16×16 and at 120×56.
+
+`radius.full` therefore takes `corner.round`, a second constant beside
+`corner.shape`, and the rule in `RULES.md` gains the exception. The switch track
+and the radio box set it; the switch thumb and the radio dot never needed it,
+because `corner-shape` does not inherit and their default is already round.
+`Button`'s `pill` shape had the same defect since it was written and is fixed
+with them: at `radius.full` a squircle is not the stadium the shape name
+promises. The gallery's `radius.full` chip carried the squircle too, so the board
+was showing a rounded rectangle under the label "pills"; it now renders the round
+shape beside the four squircles.
+
+Three tests pin it. They re-declare both corner shapes through `stylex.create`
+and rely on StyleX hashing a class per property and value, so the expected class
+is derived from the compiler rather than written down: the switch and the radio
+must carry the round class and not the squircle one, the checkbox must carry the
+squircle at its 5px radius, and the two classes must differ at all.
+
 ## Verification
 
 `pnpm --filter @lody/ui test` (46 tests, 16 of them new) and
@@ -178,8 +208,9 @@ text control while a checked one gets a different one composed with its ink edge
 at the control, and a caller class landing last.
 
 The board was read in Chromium through Storybook at 1440px, values taken off the
-rendered nodes in both palettes. The box is 16×16 at radius 5, the track 28×16
-at a full round with a 12×12 thumb inset 2px that travels to 14px from the left.
+rendered nodes in both palettes. The box is 16×16 at radius 5 with `corner-shape: squircle`,
+the track 28×16 at `radius.full` with `corner-shape: round` and a 12×12 thumb
+inset 2px that travels to 14px from the left.
 Off is `rgb(232, 234, 237)` in Lody Light and `rgb(28, 28, 28)` in Vesper with
 the matching inset; on is `rgb(26, 27, 30)` and `rgb(255, 255, 255)` with the ink
 highlight; disabled reports opacity `0.45`. Focusing a control by keyboard
diff --git a/packages/ui/AGENTS.md b/packages/ui/AGENTS.md
index 869666131..d0b429b05 100644
--- a/packages/ui/AGENTS.md
+++ b/packages/ui/AGENTS.md
@@ -46,7 +46,9 @@ into one component at a time. Source-consumed; consumers compile it through
   size, tone or shape lands with its board entry in the same change, and the
   board reads sample values back off the rendered node instead of repeating a
   literal. `test/gallery.test.tsx` fails when a token has no entry.
-- `corner.shape` is applied wherever a radius is applied. Round corners outside
+- `corner.shape` is applied wherever a radius is applied, except on
+  `radius.full`: a pill or a circle takes `corner.round`, because a squircle at
+  that radius is a superellipse rather than a stadium. Round corners outside
   Chromium are the accepted fallback.
 - A Radix file in `packages/components/src/ui` is deleted when its in-repo
   callers reach zero; private consumers sync on typecheck.
diff --git a/packages/ui/src/button/button.tsx b/packages/ui/src/button/button.tsx
index cb3883180..9ceffb51f 100644
--- a/packages/ui/src/button/button.tsx
+++ b/packages/ui/src/button/button.tsx
@@ -85,7 +85,9 @@ const styles = stylex.create({
   iconSmall: { width: button.heightSmall, paddingInline: 0 },
   iconMedium: { width: button.heightMedium, paddingInline: 0 },
   iconLarge: { width: button.heightLarge, paddingInline: 0 },
-  pill: { borderRadius: radius.full },
+  // A pill drops the base squircle: at `radius.full` a squircle is a rounded
+  // rectangle, not the stadium shape the shape name promises.
+  pill: { borderRadius: radius.full, cornerShape: corner.round },
   primary: {
     backgroundColor: {
       default: button.primaryBackground,
diff --git a/packages/ui/src/field/radio.tsx b/packages/ui/src/field/radio.tsx
index 4b3309101..17036c210 100644
--- a/packages/ui/src/field/radio.tsx
+++ b/packages/ui/src/field/radio.tsx
@@ -2,7 +2,7 @@ import { Radio as BaseRadio } from '@base-ui/react/radio';
 import { RadioGroup as BaseRadioGroup } from '@base-ui/react/radio-group';
 import * as stylex from '@stylexjs/stylex';
 import { appendClassName } from '../internal/class-name';
-import { radius, space } from '../tokens/scales.stylex';
+import { corner, radius, space } from '../tokens/scales.stylex';
 import { field } from './field.tokens.stylex';
 import { isInvalid } from './invalid';
 import { well } from './well';
@@ -31,6 +31,9 @@ const styles = stylex.create({
     width: field.boxSize,
     height: field.boxSize,
     borderRadius: radius.full,
+    // The well's squircle would make this a squircle rather than a circle, which
+    // is the one shape that tells a radio apart from a checkbox.
+    cornerShape: corner.round,
   },
   dot: {
     display: 'block',
diff --git a/packages/ui/src/field/switch.tsx b/packages/ui/src/field/switch.tsx
index 6ba211007..3b115def7 100644
--- a/packages/ui/src/field/switch.tsx
+++ b/packages/ui/src/field/switch.tsx
@@ -2,7 +2,7 @@ import { Switch as BaseSwitch } from '@base-ui/react/switch';
 import * as stylex from '@stylexjs/stylex';
 import { forwardRef, type ComponentProps } from 'react';
 import { appendClassName } from '../internal/class-name';
-import { duration, ease, radius } from '../tokens/scales.stylex';
+import { corner, duration, ease, radius } from '../tokens/scales.stylex';
 import { field } from './field.tokens.stylex';
 import { isInvalid } from './invalid';
 import { well } from './well';
@@ -24,6 +24,8 @@ const styles = stylex.create({
     width: field.switchWidth,
     height: field.switchHeight,
     borderRadius: radius.full,
+    // The well's squircle would make this a rounded rectangle; a track is a pill.
+    cornerShape: corner.round,
     justifyContent: 'flex-start',
     padding: field.switchInset,
   },
diff --git a/packages/ui/src/gallery/gallery.tsx b/packages/ui/src/gallery/gallery.tsx
index 3e62bdc12..f98149acc 100644
--- a/packages/ui/src/gallery/gallery.tsx
+++ b/packages/ui/src/gallery/gallery.tsx
@@ -345,11 +345,28 @@ const SHADOWS = [
 ];
 
 const RADII = [
-  { name: 'radius.mini', value: radius.mini, note: '16px things' },
-  { name: 'radius.small', value: radius.small, note: '28px controls, tooltips' },
-  { name: 'radius.medium', value: radius.medium, note: '32 and 36px controls' },
-  { name: 'radius.large', value: radius.large, note: 'surfaces' },
-  { name: 'radius.full', value: radius.full, note: 'pills' },
+  { name: 'radius.mini', value: radius.mini, shape: corner.shape, note: '16px things' },
+  {
+    name: 'radius.small',
+    value: radius.small,
+    shape: corner.shape,
+    note: '28px controls, tooltips',
+  },
+  {
+    name: 'radius.medium',
+    value: radius.medium,
+    shape: corner.shape,
+    note: '32 and 36px controls',
+  },
+  { name: 'radius.large', value: radius.large, shape: corner.shape, note: 'surfaces' },
+  // A squircle at this radius is a rounded rectangle, so a pill takes the round
+  // shape and the board shows the two side by side rather than claiming one.
+  {
+    name: 'radius.full',
+    value: radius.full,
+    shape: corner.round,
+    note: 'pills; the one round shape',
+  },
 ];
 
 const CONTROL_SIZES = [
@@ -468,11 +485,21 @@ function ShadowChip({
   );
 }
 
-function RadiusChip({ name, value, note }: { name: string; value: string; note: string }) {
+function RadiusChip({
+  name,
+  value,
+  shape,
+  note,
+}: {
+  name: string;
+  value: string;
+  shape: string;
+  note: string;
+}) {
   const { ref, value: measured } = useMeasured<HTMLDivElement>('border-radius');
   return (
     <Sample name={name} note={note} measured={measured}>
-      <div ref={ref} {...stylex.props(styles.radiusChip, dyn.radius(value))} />
+      <div ref={ref} {...stylex.props(styles.radiusChip, dyn.radius(value, shape))} />
     </Sample>
   );
 }
@@ -786,7 +813,7 @@ export function UiGallery({ palettes = 'both' }: UiGalleryProps) {
 
       <Section
         title="Corners"
-        rule="corner.shape (squircle) rides along with every radius; round corners outside Chromium are the accepted fallback. Nested radius is outer minus inset."
+        rule="corner.shape (squircle) rides along with every radius except radius.full, which is a pill or a circle and takes corner.round: a squircle at that radius is a superellipse, not a stadium, so it would turn a switch track into a rounded rectangle and a radio into a squircle. Round corners outside Chromium are the accepted fallback. Nested radius is outer minus inset."
       >
         <PaletteSplit palettes={palettes}>
           <Grid>
diff --git a/packages/ui/src/gallery/parts.tsx b/packages/ui/src/gallery/parts.tsx
index 6a540af8f..8119a074a 100644
--- a/packages/ui/src/gallery/parts.tsx
+++ b/packages/ui/src/gallery/parts.tsx
@@ -272,7 +272,7 @@ export const dyn = stylex.create({
     boxShadow: box,
   }),
   text: (value: string) => ({ color: value }),
-  radius: (value: string) => ({ borderRadius: value, cornerShape: corner.shape }),
+  radius: (value: string, shape: string) => ({ borderRadius: value, cornerShape: shape }),
   height: (value: string) => ({ height: value }),
   width: (value: string) => ({ width: value }),
   type: (size: string, leading: string) => ({ fontSize: size, lineHeight: leading }),
diff --git a/packages/ui/src/tokens/RULES.md b/packages/ui/src/tokens/RULES.md
index a16ade175..0ca84f054 100644
--- a/packages/ui/src/tokens/RULES.md
+++ b/packages/ui/src/tokens/RULES.md
@@ -89,7 +89,11 @@ ARIA value except `false` is invalid, `grammar` and `spelling` included.
 
 ## Corners
 
-- `corner.shape` (squircle) on every radius. Round fallback outside Chromium.
+- `corner.shape` (squircle) on every radius except `radius.full`. Round fallback
+  outside Chromium.
+- `radius.full` is a pill or a circle, and takes `corner.round`. A squircle at
+  that radius is a superellipse, not a stadium: it turns a switch track into a
+  rounded rectangle and a radio into a squircle.
 - Radius by size: `mini` 5 for 16px things, `small` 8 for 28px controls and
   tooltips, `medium` 10 for 32 and 36px controls, `large` 14 for surfaces.
 - Nested radius is outer minus inset. A 14px popup with 4px inset holds 10px
diff --git a/packages/ui/src/tokens/scales.stylex.ts b/packages/ui/src/tokens/scales.stylex.ts
index f5c5eca74..32f22214f 100644
--- a/packages/ui/src/tokens/scales.stylex.ts
+++ b/packages/ui/src/tokens/scales.stylex.ts
@@ -20,6 +20,10 @@ export const radius = stylex.defineVars({
 
 export const corner = stylex.defineConsts({
   shape: 'squircle',
+  // `radius.full` means a pill or a circle, and a squircle at that radius is a
+  // superellipse instead: a 28x16 track reads as a rounded rectangle and a 16px
+  // box as a squircle rather than a circle. Anything on `radius.full` takes this.
+  round: 'round',
 });
 
 export const control = stylex.defineVars({
diff --git a/packages/ui/test/toggles.test.tsx b/packages/ui/test/toggles.test.tsx
index a1916811c..8ec65953e 100644
--- a/packages/ui/test/toggles.test.tsx
+++ b/packages/ui/test/toggles.test.tsx
@@ -1,3 +1,4 @@
+import * as stylex from '@stylexjs/stylex';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { describe, expect, test } from 'vitest';
 import { Checkbox } from '../src/field/checkbox';
@@ -5,6 +6,7 @@ import { Field } from '../src/field/field';
 import { Input } from '../src/field/input';
 import { Radio, RadioGroup } from '../src/field/radio';
 import { Switch } from '../src/field/switch';
+import { corner } from '../src/tokens/scales.stylex';
 
 function classesOf(html: string, tag: string, occurrence = 0): string[] {
   const open = html.match(new RegExp(`<${tag}\\b[^>]*>`, 'g'))?.[occurrence] ?? '';
@@ -107,6 +109,50 @@ describe('RadioGroup', () => {
   });
 });
 
+/**
+ * StyleX hashes a class per property, value and condition, so re-declaring the
+ * two corner shapes here yields the same classes the primitives carry. Derived
+ * rather than written down, so this cannot drift from the compiler.
+ */
+const CORNERS = stylex.create({
+  squircle: { cornerShape: corner.shape },
+  round: { cornerShape: corner.round },
+});
+const SQUIRCLE = stylex.props(CORNERS.squircle).className ?? '';
+const ROUND = stylex.props(CORNERS.round).className ?? '';
+
+describe('pills are round, not squircles', () => {
+  test('the two corner shapes really are different classes', () => {
+    expect(SQUIRCLE).not.toBe('');
+    expect(ROUND).not.toBe('');
+    expect(SQUIRCLE).not.toBe(ROUND);
+  });
+
+  test('a switch track and a radio drop the well squircle', () => {
+    // A squircle at radius.full is a superellipse: it would make the track a
+    // rounded rectangle and the radio a squircle rather than a circle.
+    for (const [control, name] of [
+      [<Switch key="s" />, 'switch'],
+      [
+        <RadioGroup key="g" name="mode">
+          <Radio value="ask" />
+        </RadioGroup>,
+        'radio',
+      ],
+    ] as const) {
+      const cls = classesOf(renderToStaticMarkup(control), 'button');
+      expect(cls, `${name} is round`).toContain(ROUND);
+      expect(cls, `${name} is not a squircle`).not.toContain(SQUIRCLE);
+    }
+  });
+
+  test('a checkbox keeps the squircle, which is what its radius is for', () => {
+    const cls = classesOf(renderToStaticMarkup(<Checkbox />), 'button');
+    expect(cls).toContain(SQUIRCLE);
+    expect(cls).not.toContain(ROUND);
+  });
+});
+
 describe('the family the three join', () => {
   test('they share the box styles rather than each defining their own', () => {
     const checkbox = classesOf(renderToStaticMarkup(<Checkbox />), 'button');

From 4cbee960f82ff4124cb2de97540f80c988291b76 Mon Sep 17 00:00:00 2001
From: zxch3n <62133302+wibus-wee@users.noreply.github.com>
Date: Thu, 10 Sep 2026 06:41:22 +0000
Subject: [PATCH 4/6] fix: import act from react instead of react-dom/client

The act function should be imported from React, not from react-dom/client,
for compatibility with Vitest's jsdom environment. This fixes the
'(0, act) is not a function' error in component tests that use Switch.

- Import act directly from 'react' in both test files
- Fixes CI test failures in mobile-about-developer-mode and tasks-beta-gate
- All 11 tests now pass locally

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../components/tests/mobile-about-developer-mode.test.tsx     | 4 ++--
 packages/components/tests/tasks-beta-gate.test.tsx            | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/tests/mobile-about-developer-mode.test.tsx b/packages/components/tests/mobile-about-developer-mode.test.tsx
index 6c6249cf4..0841f374f 100644
--- a/packages/components/tests/mobile-about-developer-mode.test.tsx
+++ b/packages/components/tests/mobile-about-developer-mode.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
-import React from 'react';
-import { act, createRoot, type Root } from 'react-dom/client';
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
 import { createStore, Provider } from 'jotai';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 
diff --git a/packages/components/tests/tasks-beta-gate.test.tsx b/packages/components/tests/tasks-beta-gate.test.tsx
index 20891a7b7..97e025985 100644
--- a/packages/components/tests/tasks-beta-gate.test.tsx
+++ b/packages/components/tests/tasks-beta-gate.test.tsx
@@ -1,7 +1,7 @@
 // @vitest-environment jsdom
 
-import React from 'react';
-import { act, createRoot, type Root } from 'react-dom/client';
+import React, { act } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
 import { createStore, Provider, useAtomValue } from 'jotai';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 

From 8cc913b927e794cbd78287d6e845593e9bfd70a7 Mon Sep 17 00:00:00 2001
From: Wibus <62133302+wibus-wee@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:09:39 +0000
Subject: [PATCH 5/6] fix(components): prove the selection loop stops by its
 effect, not a frame count

`scrolls at the edge, selects newly reached messages, and stops on release`
counted outstanding requestAnimationFrame callbacks to show the auto-scroll loop
had stopped. That held only while the loop was the sole rAF user under the
component. The migrated Checkbox brings Base UI's transition-status bookkeeping
with it, and Base UI's scheduler keeps its last native frame queued on purpose,
turning it into a no-op rather than cancelling it, so a checked box always
leaves one frame outstanding and the count can never reach zero again. No
product code can change that; the assertion is what has to move.

Assert what the test's own name claims instead: after release, draining whatever
frames remain must not advance the scroll. That keeps its teeth -- neutering
`end()` makes the scroll run on from 8.87 to 26.6 and the test fails -- and it
no longer depends on which library happens to hold a frame.

Also drop the `React` default import 89f6583d added to
mobile-about-developer-mode, which that file never uses; tasks-beta-gate keeps
its own because it references `React.ReactNode`.

Model: claude-opus-5[1m]

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../components/tests/message-selection.test.tsx    | 14 +++++++++++++-
 .../tests/mobile-about-developer-mode.test.tsx     |  2 +-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/packages/components/tests/message-selection.test.tsx b/packages/components/tests/message-selection.test.tsx
index 46ae02304..1d6e0b295 100644
--- a/packages/components/tests/message-selection.test.tsx
+++ b/packages/components/tests/message-selection.test.tsx
@@ -202,7 +202,19 @@ describe('chat message selection', () => {
       await act(async () => {
         window.dispatchEvent(new MouseEvent('pointerup'));
       });
-      expect(frames.size).toBe(0);
+      // Releasing stops the loop, which shows as scrolling that no longer
+      // advances however many frames are drained. An outstanding-frame count
+      // cannot show it: Base UI's scheduler deliberately leaves its last frame
+      // queued and turns it into a no-op, so any checkbox in the tree keeps one.
+      const settled = container.scrollTop;
+      for (const time of [32, 48]) {
+        await act(async () => {
+          const pending = [...frames.values()];
+          frames.clear();
+          pending.forEach((callback) => callback(time));
+        });
+      }
+      expect(container.scrollTop).toBe(settled);
       expect(overlay.hidden).toBe(true);
     } finally {
       if (original) Object.defineProperty(document, 'elementFromPoint', original);
diff --git a/packages/components/tests/mobile-about-developer-mode.test.tsx b/packages/components/tests/mobile-about-developer-mode.test.tsx
index 0841f374f..b87c34020 100644
--- a/packages/components/tests/mobile-about-developer-mode.test.tsx
+++ b/packages/components/tests/mobile-about-developer-mode.test.tsx
@@ -1,6 +1,6 @@
 // @vitest-environment jsdom
 
-import React, { act } from 'react';
+import { act } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { createStore, Provider } from 'jotai';
 import { afterEach, beforeEach, describe, expect, it } from 'vitest';

From 74f9030eefd75f16182de2e79657fb646407326e Mon Sep 17 00:00:00 2001
From: Wibus <62133302+wibus-wee@users.noreply.github.com>
Date: Thu, 10 Sep 2026 08:11:22 +0000
Subject: [PATCH 6/6] docs: correct the note's claim that the local test
 failure was environmental

The note excused `packages/components`' suite failing with
`act is not a function` as pre-existing, on the evidence that the base commit
failed the same way. That evidence was worthless: React 19 exports `act` only
from its development build, so the suite needs `NODE_ENV=development` and fails
on both sides without it. Dismissing it hid the three failures that then reached
CI. Record what actually happened, including why an outstanding-frame count
cannot survive a Base UI control in the tree.

Model: claude-opus-5[1m]

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 .../feature/2026-09-10-ui-choice-controls.md  | 34 ++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

diff --git a/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md b/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md
index cfec0c7ee..6050676fa 100644
--- a/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md
+++ b/.agents/notes/implemented/feature/2026-09-10-ui-choice-controls.md
@@ -193,6 +193,33 @@ is derived from the compiler rather than written down: the switch and the radio
 must carry the round class and not the squircle one, the checkbox must carry the
 squircle at its 5px radius, and the two classes must differ at all.
 
+## Correction: the local suite failure was real, and it hid three others
+
+This note first recorded that `packages/components`' suite fails on this machine
+"before and after the change" with `act is not a function`, and called it
+environmental. That reading was wrong, and it was wrong in the way that costs
+the most: it dismissed the one signal that was working.
+
+React 19 exports `act` only from its development build, so the suite needs
+`NODE_ENV=development`. Without it nearly every file fails, which is exactly why
+the base commit failed the same way — the comparison that seemed to prove the
+failure was pre-existing proved only that the same variable was missing on both
+sides. `NODE_ENV=development pnpm --filter @lody/components test` reproduces CI.
+
+Under that blanket failure sat three real ones, and they reached CI:
+
+- Base UI's Switch constructs a `PointerEvent`, which jsdom does not implement,
+  so `mobile-about-developer-mode` and `tasks-beta-gate` needed a polyfill. The
+  fix that added it also moved `act` to `react-dom/client`, which does not
+  export it, and that is what CI then reported. `act` comes from `react`.
+- `message-selection` proved its auto-scroll loop had stopped by counting
+  outstanding `requestAnimationFrame` callbacks. Base UI's scheduler keeps its
+  last native frame queued on purpose and turns it into a no-op instead of
+  cancelling it, so a checked box in the tree leaves one behind and the count
+  can never reach zero. No product change fixes that; the test now asserts that
+  draining further frames does not advance the scroll, which is the behaviour
+  its own name claims.
+
 ## Verification
 
 `pnpm --filter @lody/ui test` (46 tests, 16 of them new) and
@@ -227,10 +254,9 @@ the atom the surface reads.
 Limits: no test asserts a rendered appearance, and the board itself draws no
 focus ring, because a board cannot hold focus while it is read — the rings above
 were read by focusing a control in the browser rather than from a sample.
-`pnpm check` was not run to completion for the whole repository in this session;
-`packages/components`' test suite fails on this machine before and after the
-change with `act is not a function`, which was confirmed by running the same
-file against the base commit and is unrelated. `THIRD_PARTY_NOTICES.md` still
+`pnpm check` was not run to completion for the whole repository in this session,
+and the first version of this note wrongly excused a local test failure rather
+than reading it; see the correction above. `THIRD_PARTY_NOTICES.md` still
 lists the three removed packages: regenerating it here would rewrite the whole
 file against a different dependency snapshot, and the field migration left it in
 the same state. Only Chromium was checked, and no mobile surface was opened.