components

InlineEdit

InlineEdit enables in-place editing of field values. In read mode, the field displays its current value as static text. Clicking it transitions to edit mode, revealing a form input with Save and Cancel controls. InlineEditField is the single-field unit. InlineEditGroup wraps multiple fields so they enter and exit edit mode together and share a single save action. Use the controlled prop on fields inside a group so the group manages their state. The save prop accepts an async function; the component automatically shows a saving state while the promise resolves and transitions to an error state if it rejects.

Import

import { InlineEditField, InlineEditGroup } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Allow editing values directly in a detail view without opening a form.
+Quick updates to individual fields in record views.
+When switching between read and edit modes for specific fields.

When not to use

−For complex multi-field forms — use a standard form with inputs.
−For creating new records — use a form or modal.
−When all fields should be editable simultaneously — use a form.

Examples

Code Samples

Single Inline Edit Field

A standalone InlineEditField with an InputText inside. Click the value to enter edit mode.

import { InlineEditField, InputText } from "@skedulo/breeze-ui-react";

export default function SingleInlineEdit() {
  return (
    <InlineEditField
      save={async () => { /* persist the value */ }}
    >
      <InputText value="Sarah Connor" label="Name" />
    </InlineEditField>
  );
}

Grouped Inline Edit

Use InlineEditGroup with controlled fields so all fields edit and save together.

import { InlineEditGroup, InlineEditField, InputText } from "@skedulo/breeze-ui-react";

export default function GroupedInlineEdit() {
  return (
    <InlineEditGroup
      controller
      save={async () => { /* persist all values */ }}
    >
      <InlineEditField controlled>
        <InputText value="Sarah Connor" label="Name" />
      </InlineEditField>
      <InlineEditField controlled>
        <InputText value="Field Technician" label="Role" />
      </InlineEditField>
    </InlineEditGroup>
  );
}

Guidelines

Do

✓Show a clear visual distinction between read and edit modes.
✓Use save/cancel controls in edit mode.
✓Handle validation errors inline.

Don't

✗Don't use inline edit for fields that require related field context.
✗Don't auto-save on blur — provide explicit save/cancel controls.

API Reference

Prop	Type	Default	Description
locked	boolean	false	Prevents the field from entering edit mode. The value displays as static text only.
save	() => Promise<void>	—	Async function called when Save is clicked. The component shows a saving indicator while the promise is pending.
controlled	boolean	false	When true, the field defers its mode state to a parent InlineEditGroup.
truncate	boolean	false	Truncates the field value in read mode with an ellipsis.
placeholder	string	—	Text shown when the field value is empty.
controls	ReactNode	—	Override the default Save/Cancel buttons with custom controls.
error	ReactNode	—	Error message rendered below the controls in error state.
readMode	ReactNode	—	Override the default read-mode value display with custom content.

Related Components

Input Text RecordField Card