Does enabling link mode equalize the current edges?

No. Toggling link mode only changes the controlled mode; existing edge values remain intact until the next edit.

Does it convert between rem, px or other units?

No. Value and unit strings pass through exactly as supplied. Conversion and validation belong to the consuming application.

Linked Logical Spacing

Edit block and inline spacing with writing-direction-aware logical edges.

Logical spacing

When linked, editing one edge copies its exact value and unit to all four logical edges.

Block start

Value

Unit

Block end

Value

Unit

Inline start

Value

Unit

Inline end

Value

Unit

Logical edges are independent.

Customise

Code

<InputLogicalSpacing />

Linked Logical Spacing is a controlled forms-inputs component for layout editors that tune spacing across block-start, block-end, inline-start and inline-end edges.

Each edge keeps its caller-provided value and unit as exact text. Link mode is controlled separately: turning it on does not rewrite existing values, and editing either part of one edge copies that resulting value/unit pair to all four edges while linked.

The component does not parse CSS, infer or convert units, or manage design tokens. The consuming layout tool owns validation, persistence and any unit policy.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/input-logical-spacing

Usage

import { useState } from "react";
import { InputLogicalSpacing } from "@/components/input-logical-spacing";

const initialEdges = {
  blockStart: { value: "1.5", unit: "rem" },
  blockEnd: { value: "1.5", unit: "rem" },
  inlineStart: { value: "1", unit: "rem" },
  inlineEnd: { value: "1", unit: "rem" },
};

export function LayoutSpacingEditor() {
  const [edges, setEdges] = useState(initialEdges);
  const [linked, setLinked] = useState(false);
  return <InputLogicalSpacing edges={edges} linked={linked} onEdgesChange={setEdges} onLinkedChange={setLinked} />;
}

Props

Prop	Type	Default	Description
edges	LogicalSpacingEdges	required	Caller-controlled blockStart, blockEnd, inlineStart and inlineEnd value/unit strings.
linked	boolean	required	Controlled mode. When true, editing any edge copies the resulting exact value/unit pair to all four.
onEdgesChange	(edges: LogicalSpacingEdges) => void	required	Receives a new immutable edge map after edits; no parsing or unit conversion occurs.
onLinkedChange	(linked: boolean) => void	required	Receives a link-mode toggle without modifying edge values.
disabled	boolean	false	Disables the link action and all edge fields.
className	string	undefined	Additional classes merged onto the component root.

Customisation

The component owns logical labels and exact-token linking. The consumer owns CSS validation, unit policy, token mapping, persistence and surrounding layout.

.layout-card { padding-inline: var(--card-inline-space); }

Frequently asked questions

Does enabling link mode equalize the current edges?: No. Toggling link mode only changes the controlled mode; existing edge values remain intact until the next edit.
Does it convert between rem, px or other units?: No. Value and unit strings pass through exactly as supplied. Conversion and validation belong to the consuming application.

Related components

Build the rest of a layout settings panelExplore form controls for the rest of your editor.Form components