Design System/Molecules/Property Row

Property Row

Horizontal label + control row for designer inspector panels. Left-aligned label, right-aligned controls, single visual row. Differs from Field, which is a vertical form field with hint/error text.

When To Use

  • Use Property Row when you need a reusable molecules pattern instead of rebuilding the structure from primitives.
  • Start from the simplest example that fits the task, then add decoration only when it clarifies meaning or hierarchy.
  • Review the examples below to understand the tradeoffs between density, emphasis, and behavior.

When Not To Use

  • Do not use Property Row just because it already exists in the catalog; choose the pattern that matches the task, not the most decorative option.
  • Do not keep layering options onto the pattern when a simpler component or section would be easier to understand and maintain.

Accessibility Notes

  • Maintain heading order and region labels so the surrounding layout stays understandable when styles are stripped away.
  • Avoid using visual grouping alone to explain hierarchy; expose the structure semantically as well.
  • Make sure drag, resize, and reorder interactions have keyboard alternatives when they are part of the core task.

Key Props / API

Props

label, layout, labelWidth, labelAlign

Example Code

import { PropertyRow, InputNumber } from "@hilum/ui"

<PropertyRow label="Width">
  <InputNumber value={width} onChange={setWidth} unit="px" />
</PropertyRow>

<PropertyRow label="Opacity">
  <Slider value={[opacity]} onValueChange={([v]) => setOpacity(v)} min={0} max={100} />
  <InputNumber value={opacity} onChange={setOpacity} unit="%" min={0} max={100} className="w-16 shrink-0" />
</PropertyRow>

Property Row

Basic layout

Label and controls side by side

Width
Height
Rotation
Opacity

Custom label width

labelWidth controls the fixed left column

Background