layout / stable

PropertyGrid

One or two tightly spaced columns of record property fields with spanning rows.

LIVE PREVIEW

Loading preview…

When to use

RecordSection rail placement automatically keeps a single property column, including existing two-column callers.
Tracking and metadata groups in a record property rail.

Consider an alternative

Page layout — use Page.
Long data-entry forms — use a regular form layout.

Import

import { PropertyGrid } from '@revido-llc/kit';

Keyboard interaction

Tab — move through child controls in reading order

Props

Props documented by the Kit. Refer to the TypeScript types for the complete interface, including inherited props.


children (required)	ReactNode	—
className	string	—
columns	1 \| 2	1

Examples

Tracking grid

"use client";
import { useState } from "react";
import { PropertyField, PropertyGrid, PropertyNumber, PropertyToggle } from "@revido-llc/kit";

export default function TrackingProperties() {
  const [estimate, setEstimate] = useState<number | null>(3.5);
  const [actual, setActual] = useState<number | null>(2.5);
  const [billable, setBillable] = useState(true);
  return <PropertyGrid columns={2}>
    <PropertyField label="Estimate"><PropertyNumber label="Estimate" value={estimate} onChange={setEstimate} suffix="SP" /></PropertyField>
    <PropertyField label="Actual"><PropertyNumber label="Actual" value={actual} onChange={setActual} suffix="SP" /></PropertyField>
    <PropertyField label="Billing" span={2}><PropertyToggle label="Billable" isSelected={billable} onChange={setBillable} /></PropertyField>
  </PropertyGrid>;
}

Single column

"use client";
import { useState } from "react";
import { PropertyField, PropertyGrid, PropertyNumber, PropertyToggle } from "@revido-llc/kit";

export default function TrackingProperties() {
  const [estimate, setEstimate] = useState<number | null>(3.5);
  const [actual, setActual] = useState<number | null>(2.5);
  const [billable, setBillable] = useState(true);
  return <PropertyGrid columns={1}>
    <PropertyField label="Estimate"><PropertyNumber label="Estimate" value={estimate} onChange={setEstimate} suffix="SP" /></PropertyField>
    <PropertyField label="Actual"><PropertyNumber label="Actual" value={actual} onChange={setActual} suffix="SP" /></PropertyField>
    <PropertyField label="Billing" span={1}><PropertyToggle label="Billable" isSelected={billable} onChange={setBillable} /></PropertyField>
  </PropertyGrid>;
}

Literal anatomy

Static component anatomy; bind events in the consuming app.

import { useState } from "react";
import { PropertyGrid, PropertyField, PropertyNumber } from "@revido-llc/kit";
export default function PropertyAnatomy() {
 const [value, setValue] = useState<number | null>(3);
 return <PropertyGrid><PropertyField label="Estimate"><PropertyNumber label="Estimate" value={value} onChange={setValue} /></PropertyField></PropertyGrid>;
}