Named sizes
Each size resolves through --base-input-size-{size}-height × --sw-rem (default 10px). Drop a switch into a pure-admin form-size context
and it matches automatically; or pass size="sm" explicitly.
| Prop | Coefficient | Resolved height | Switch | MultiSwitch |
|---|---|---|---|---|
size="xs" | 3.1 | 31px | ||
size="sm" | 3.3 | 33px | ||
size="md" default | 3.5 | 35px | ||
size="lg" | 3.8 | 38px | ||
size="xl" | 4.1 | 41px |
SZ01 Numeric sizes (legacy / explicit)
Pass a number to set --scale directly: scale = size / 50
Live Demo
size={40}size={60}size={80}size={100}Code
When to use
How it works
Numeric size sets --scale = size / 50 inline. size={50} renders the natural 32px height, size={80} scales it to ~51px.
When to use numeric
Use numeric size for one-off displays where you need an exact pixel value that doesn't match the form table. For form-aligned defaults, use named sizes.
SZ02 Pure-admin integration
Aligning switch sizes with pure-admin's font-size baseline
Recipe
Why it works
Pure-admin sets html { font-size: 10px }, so 1rem = 10px in that context. Setting --sw-rem: 1rem means switches scale with the user's font-size
preference, like the rest of the form chrome.
All five named sizes derive from --base-input-size-{name}-height — overriding any of
them on a wrapper rescales every default-sized switch underneath.
'md' (35px), up from the 1.x default of 50 (numeric, ≈32px). Switches with no
explicit size are now ~3px taller — most consumers won't notice, but if
you depended on the old default, pass size={50} explicitly or
set --base-input-size-md-height: 3.2 globally.