fix(core): align checkbox, radio, and switch control sizes

[cixzhang]

What

Aligns the sizing of the three selection controls — CheckboxInput, RadioList, and Switch — and adds a Storybook view for comparing them side by side.

Component changes (@astryxdesign/core):

• Checkbox & Radio — the visible control now fills its size exactly (20px at sm, 24px at md) instead of being inset 2px inside the hit-target wrapper.
• Switch — the sm track is narrowed to 32px wide (was 34px) with a 2px inset (was 3px). The sm thumb grows from 14px (off) to 16px (on).

Storybook:

• New Core/Control Size Comparison view: All Sizes (all three grouped by size), plus Small and Medium single-row stories.

Why

The selection controls share a size API (sm / md) but their proportions were inconsistent — the checkbox/radio glyph was inset 2px inside its wrapper. This lands the intended, consistent sizes and gives a comparison view to keep them honest.

Before → after:

Control	sm control	md control
Checkbox	18px → 20px	22px → 24px
Radio	18px → 20px	22px → 24px
Switch	34×20 track, 3px inset, 12/16px thumb → 32×20 track, 2px inset, 14/16px thumb	40×24 track, 4px inset, 16/20px thumb (unchanged)

Testing

• pnpm -F @astryxdesign/core unit tests for CheckboxInput, RadioList, and Switch pass.
• Core build + typecheck:docs pass.
• Prettier, sync, and changeset checks clean (patch changeset included).

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview, Comment	Jul 29, 2026 7:04pm

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

CheckboxInput · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	449	-
Complexity	N/A	Very High (45)	-

RadioList · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	521	-
Complexity	N/A	Very High (50)	-

Switch · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	437	-
Complexity	N/A	Very High (43)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.7KB	0B

Accessibility Audit

Status: 1 accessibility violation(s) found — 1 serious.

RadioList - 1 issue(s)

• 🟠 serious: Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds
  • Rule: color-contrast · Affects 3/12 stories · Learn more
  • WCAG: 1.4.3 (Level AA)

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}

[ernestt]

Yes I think this is a good consistency change. Agreeing with the scaling of switch proportionally down to achieve "sm". Side question, if "sm" and "md" would conflict with the size tokens sm (28), md (32). and lg (36) values? Would xs and xxs make more sense since the sizings are going down in 4px increments already.

[cixzhang]

Yes I think this is a good consistency change. Agreeing with the scaling of switch proportionally down to achieve "sm". Side question, if "sm" and "md" would conflict with the size tokens sm (28), md (32). and lg (36) values? Would xs and xxs make more sense since the sizings are going down in 4px increments already.

At the moment controls don't align with sizes from inputs and this seems to be intentionally -- they're generally smaller. We were on the fence around having > 1 sizes for controls generally but IIRC we're at 2 sizes to conform with expectations from other systems and to support dense views alongside marketing views. I believe @rubyycheung explored larger sizes for controls but they ended up looking way too big.

For adding more sizes, I would probably suggest taking a more holistic view over all of icons, spinners, avatars, etc. All of these are slightly different and controls maybe feel closer in family to those than input sizes.