components

RecordField

RecordField displays a labeled value in a record/detail view layout. It consists of a label (rendered via RecordFieldLabel) and a value area. The labelPosition prop controls whether the label appears above or beside the value. Use RecordField to build detail pages, summary panels, and read-only data displays. It pairs well with InlineEditField for editable record views.

Import

import { RecordField } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Display labeled values in detail views.
+Show read-only field data in record/entity pages.
+Create consistent label-value layouts.

When not to use

−For editable fields — use form inputs.
−For tabular data — use Table.
−For key metrics — use Card with custom content.

Examples

Code Samples

Basic Record Fields

A set of labeled record fields displaying job details.

import { RecordField, RecordFieldLabel } from "@skedulo/breeze-ui-react";

export default function BasicRecordFields() {
  return (
    <div className="space-y-4">
      <RecordField label={<RecordFieldLabel>Job Name</RecordFieldLabel>}>
        HVAC Installation
      </RecordField>
      <RecordField label={<RecordFieldLabel>Resource</RecordFieldLabel>}>
        Sarah Connor
      </RecordField>
      <RecordField label={<RecordFieldLabel>Location</RecordFieldLabel>}>
        123 Main St, Brisbane QLD 4000
      </RecordField>
    </div>
  );
}

Side Label Position

Labels positioned beside the value for a horizontal layout.

import { RecordField, RecordFieldLabel } from "@skedulo/breeze-ui-react";

export default function SideLabels() {
  return (
    <div className="space-y-3">
      <RecordField labelPosition="side" label={<RecordFieldLabel>Status</RecordFieldLabel>}>
        Active
      </RecordField>
      <RecordField labelPosition="side" label={<RecordFieldLabel>Priority</RecordFieldLabel>}>
        High
      </RecordField>
    </div>
  );
}

Guidelines

Do

✓Use consistent labelPosition across a group of fields.
✓Keep labels concise.
✓Use labelRight for secondary metadata.

Don't

✗Don't use for interactive/editable content.
✗Don't mix label positions in the same section.

API Reference

Prop	Type	Default	Description
label	ReactNode	—	The field label. Use RecordFieldLabel as a child or pass custom content via this slot.
labelRight	ReactNode	—	Content rendered to the top-right of the field (e.g. an edit icon or action).
labelPosition	"above" \| "side"	"above"	Whether the label sits above or beside the value.
size	string	—	Controls the overall size of the field layout.

Related Components

Table Card InlineEdit