Number Scrub Box Spacing

ProNew

A padding or margin editor with four scrub fields around a box diagram and a link toggle that edits all sides together, printing the CSS shorthand.

Customize

This item has no props to tune. Use the lens above to change theme, density, direction and more.

Guide and examples

When to use it

Use this when a style panel edits padding, margin, inset or border width on four sides.

Do not use it when the values come from a spacing scale of tokens (offer the tokens as a select).

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Required	Description
`initial`	`Sides`	optional	-
`property`	`"padding" \| "margin"`	optional	-
`onChange`	`(s: Sides) => void`	optional	-

Accessibility

Each side is a labelled input (T, R, B, L) with arrow-key stepping.
Link is a pressed toggle with text.
The CSS shorthand is shown as text in its shortest form.

Testing

The pattern ships with a Testing Library test (number-scrub-box-spacing.test.tsx) that covers the shorthand forms, independent and linked editing and the bounds.