Give content room
Selected frame
Spacing control
Edits top, right, bottom, and left spacing with linked or independent native number fields and explicit units.
Preview
In action
When to use
Use it for
- Padding, margin, inset, or other four-sided numeric values in a caller-specified unit.
- Link sides to apply the next edit to every side; linking alone preserves existing values.
- value/defaultValue/onValueChange and linked/defaultLinked/onLinkedChange control the values and link state independently.
Not for
- Converting between units or assuming CSS semantics beyond the supplied numeric fields.
- Treating cleared values as zero; a cleared side is null.
Install
Three ways in. They share one source, so the pixels match whichever you pick.
1. Import the package
npm install @noorddev/vlak-react
// once, next to your app's root
import "@noorddev/vlak-react/css";
import { SpacingControl } from "@noorddev/vlak-react";Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/spacing-control.
2. Vendor the source
npx @noorddev/vlak-cli add spacing-control
The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.
3. Through shadcn
npx shadcn add https://vlak.dev/r/spacing-control.json
The same registry item, installed by shadcn's CLI.
CSS only
<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />
No React. Link vlak.css and use the markup and classes below.
React
import { SpacingControl } from "@noorddev/vlak-react";
<SpacingControl label="Padding" name="padding" unit="px" min={0} defaultValue={{ top: 16, right: 24, bottom: 16, left: 24 }} />Props
SpacingControl
Four native numeric fields; linking applies the next edit to every side.
| Prop | Type | Default | Description |
|---|---|---|---|
labelrequired | ReactNode | ||
value | SpacingValue | ||
defaultValue | SpacingValue | initial | |
onValueChange | (value: SpacingValue) => void | ||
linked | boolean | ||
defaultLinked | boolean | false | |
onLinkedChange | (linked: boolean) => void | ||
unit | string | "px" | |
min | number | ||
max | number | ||
step | number | 1 | |
readOnly | boolean |
Also accepts Omit<FieldsetHTMLAttributes<HTMLFieldSetElement>, "defaultValue" | "onChange">.
Keyboard
| Keys | Does |
|---|---|
| Tab | Moves through four number inputs and the link action. |
| Arrow up, Arrow down | Uses native number stepping with supplied min, max, and step. |
| Enter, Space | Toggles Link sides on the focused action. |
Accessibility
- A fieldset and legend name the spacing group; each native number field includes its side and unit.
- Link sides has a stable name and aria-pressed, plus text explaining the next-edit behavior.
- Inputs and the link action have 44px targets; native bounds and step support form validation.
- Named fields submit separately; reset restores uncontrolled values and link state. The ref reaches the fieldset.
Markup
<fieldset class="rs-spacing-control"><legend class="rs-spacing-control-label">Padding</legend><div class="rs-spacing-control-fields"><label class="rs-spacing-control-field">Top (px)<input class="rs-input rs-input-full rs-spacing-control-input" type="number" value="16" /></label><label class="rs-spacing-control-field">Right (px)<input class="rs-input rs-input-full rs-spacing-control-input" type="number" value="24" /></label><label class="rs-spacing-control-field">Bottom (px)<input class="rs-input rs-input-full rs-spacing-control-input" type="number" value="16" /></label><label class="rs-spacing-control-field">Left (px)<input class="rs-input rs-input-full rs-spacing-control-input" type="number" value="24" /></label></div></fieldset>
Classes
.rs-spacing-control.rs-spacing-control-label.rs-spacing-control-fields.rs-spacing-control-field.rs-spacing-control-input.rs-spacing-control-link.rs-spacing-control-linked.rs-spacing-control-note