forms / stable

PropertyField

Associated property label and value. Rail groups share a content-sized label column capped at 40% / 7rem, giving values the remaining width; long values wrap or expose their complete text.

LIVE PREVIEW

Loading preview…

When to use

Label a control in a record rail. icon belongs to the label; the child's leading belongs to its value.
Use span 2 inside a two-column PropertyGrid; htmlFor associates controls outside the property family.

Consider an alternative

Uppercase labels or custom field grids in a rail — keep sentence case and the shared label column.
Conventional form labels — use FieldLabel.
Section headings — use Disclosure.

Import

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

Keyboard interaction

Tab — focus the associated control

Props

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


children (required)	ReactNode	—
label (required)	string	—
htmlFor	string	—	Explicit id for a control outside the property family.
icon	ReactNode	—	Decorative property icon beside the label; value visuals belong to the child control.
labelAdornment	ReactNode	—
layout	"stacked" \| "row"	"row"	Single-line label and value. Rail labels share a content-sized column capped at 40% / 7rem; tall values align to the first control line.
span	1 \| 2	1	Span both columns in a form grid; rail placement always keeps a single row column.

Examples

Stacked label and property icon

"use client";
import { useState } from "react";
import { Clock } from "lucide-react";
import { Icon, PropertyField, PropertyNumber } from "@revido-llc/kit";

export default function Example() {
  const [estimate, setEstimate] = useState<number | null>(3.5);
  return (
    <PropertyField label="Estimate" layout="stacked" icon={<Icon as={Clock} tone="tertiary" />}>
      <PropertyNumber label="Estimate" value={estimate} onChange={setEstimate} suffix="SP" />
    </PropertyField>
  );
}

Compact row and adornment

"use client";
import { useState } from "react";
import { Clock } from "lucide-react";
import { Icon, PropertyField, PropertyNumber } from "@revido-llc/kit";

export default function Example() {
  const [estimate, setEstimate] = useState<number | null>(3.5);
  return (
    <PropertyField label="Estimate" layout="row" labelAdornment={<span>Optional</span>}>
      <PropertyNumber label="Estimate" value={estimate} onChange={setEstimate} suffix="SP" />
    </PropertyField>
  );
}

Property icon and value avatar

The label's user icon and the selected person's avatar have different roles.

"use client";
import { useState } from "react";
import { UserPlus } from "lucide-react";
import { Icon, PropertyField, PropertySelect, personOption } from "@revido-llc/kit";
const people = [personOption({ id: "ana", name: "Ana Costa" })];
export default function Example() {
  const [assignee, setAssignee] = useState<string | null>("ana");
  return <PropertyField label="Assignee" layout="row" icon={<Icon as={UserPlus} tone="tertiary" />}>
    <PropertySelect label="Assignee" searchable options={people} value={assignee} onChange={setAssignee} allowNone noneLabel="Unassigned" />
  </PropertyField>;
}

Narrow property rail

Labels share one bounded column while longer values wrap with their complete text available.

import { RecordSection, PropertyGrid, PropertyField, PropertyValue } from "@revido-llc/kit";
export default function Example() { return <RecordSection title="Tracking" placement="rail"><PropertyGrid><PropertyField label="Review"><PropertyValue>Review discrepancy before QA</PropertyValue></PropertyField></PropertyGrid></RecordSection>; }

Spanning and explicit control association

import { Input, PropertyField, PropertyGrid } from "@revido-llc/kit";
export default function Example() {
  return <PropertyGrid columns={2}>
    <PropertyField label="Reference" htmlFor="reference" span={2} labelAdornment={<span>Optional</span>}>
      <Input id="reference" defaultValue="REV-42" />
    </PropertyField>
  </PropertyGrid>;
}

Literal anatomy

Static component anatomy; bind events in the consuming app.

import { PropertyField, Input } from "@revido-llc/kit";
export default function PropertyAnatomy() { return <PropertyField label="Owner"><Input defaultValue="Ada" /></PropertyField>; }