F1 component kit/Forms and editing/Form section, save bar and unsaved guardDesktop

Form section, save bar and unsaved guard

F1 variant18 · form-section

Long sectioned forms: a numbered section with the 180px label column at compact (stacked on phone), the dark pending-changes bar (dirty · saving · saved · validation summary that jumps to fields · conflict “someone else changed this” with Compare / Reload / Keep mine), and the unsaved-changes guard on shell nav and tab close.

Covers: form-section primitive, form-section designer, save-bar primitive, save-bar designer, unsaved-guard designer. Exports: FormSection, SaveBar, UnsavedGuard.

Whole page:Phone is fixed at comfortable (POWERUPS #15).Laravel · navyDTC · midnight green

Anatomy

The component as it sits in the product: English, compact, real data shapes.

Design 1287

03

Production

Jacket
Read only after create
8 - Radio + Image + Popup
SYC
12.5
Extra meterage on the buying sheet, not money
Online means they must make a design selection
Read on phone, edit on desktopLong edits have no phone evidence (EVIDENCE §7).

States

7 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.

clean

Design 1287

03

Production

Jacket
Read only after create
8 - Radio + Image + Popup
SYC
12.5
Extra meterage on the buying sheet, not money
Online means they must make a design selection
Read on phone, edit on desktopLong edits have no phone evidence (EVIDENCE §7).
dirty · 3 changes

Design 1287

03

Production

Jacket
Read only after create
8 - Radio + Image + Popup
SYC
12.5
Extra meterage on the buying sheet, not money
Online means they must make a design selection
Read on phone, edit on desktopLong edits have no phone evidence (EVIDENCE §7).
saving

Design 1287

03

Production

Jacket
Read only after create
8 - Radio + Image + Popup
SYC
12.5
Extra meterage on the buying sheet, not money
Online means they must make a design selection
Read on phone, edit on desktopLong edits have no phone evidence (EVIDENCE §7).
saved

Design 1287

03

Production

Jacket
Read only after create
8 - Radio + Image + Popup
SYC
12.5
Extra meterage on the buying sheet, not money
Online means they must make a design selection
Read on phone, edit on desktopLong edits have no phone evidence (EVIDENCE §7).
validation summary

Design 1287

03

Production

Jacket
Read only after create
8 - Radio + Image + Popup
SYC
12.5
Extra meterage on the buying sheet, not money
Online means they must make a design selection
Read on phone, edit on desktopLong edits have no phone evidence (EVIDENCE §7).
conflict (Q22)

Design 1287

03

Production

Jacket
Read only after create
8 - Radio + Image + Popup
SYC
12.5
Extra meterage on the buying sheet, not money
Online means they must make a design selection
Read on phone, edit on desktopLong edits have no phone evidence (EVIDENCE §7).
unsaved guard

Design 1287

03

Production

Jacket
Read only after create
8 - Radio + Image + Popup
SYC
12.5
Extra meterage on the buying sheet, not money
Online means they must make a design selection
Read on phone, edit on desktopLong edits have no phone evidence (EVIDENCE §7).

Density

The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.

comfortable · phone default

Design 1287

03

Production

Jacket
Read only after create
8 - Radio + Image + Popup
SYC
12.5
Extra meterage on the buying sheet, not money
Online means they must make a design selection
Read on phone, edit on desktopLong edits have no phone evidence (EVIDENCE §7).

English · 中文

Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.

en

Design 1287

03

Production

Jacket
Read only after create
8 - Radio + Image + Popup
SYC
12.5
Extra meterage on the buying sheet, not money
Online means they must make a design selection
Read on phone, edit on desktopLong edits have no phone evidence (EVIDENCE §7).
中文 · lang=zh-Hans

Design 1287

03

生产

Jacket
创建后只读
8 - Radio + Image + Popup
SYC
12.5
采购单上额外米数，不是金额
在线表示必须选择一个款式
手机只读，桌面编辑长表单编辑无手机使用证据。

Long string · permission denied

The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).

long string

Design 1287

03

Production

Jacket
Read only after create
8 - Radio + Image + Popup
SYC
12.5
Extra meterage on the buying sheet, not money
Online means they must make a design selection
Read on phone, edit on desktopLong edits have no phone evidence (EVIDENCE §7).
permission denied

Design 1287

03

Production

Jacket
Read only after create
8 - Radio + Image + Popup
SYC
12.5
Extra meterage on the buying sheet, not money
Online means they must make a design selection
Read on phone, edit on desktopLong edits have no phone evidence (EVIDENCE §7).

Contract

The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.

Export
FormSection · @rj/admin-kit
Props
id · n · title · errors · layout inline|stack · repeatable
States
clean · error
shadcn / Radix
none (fieldset)
Package underneath
react-hook-form
Accessibility
fieldset + legend; error count in the legend
Export
SaveBar · @rj/admin-kit
Props
dirtyFields · onSave · onDiscard · conflict {by, at, version}
States
hidden · dirty · saving · saved · error (summary) · conflict
Package underneath
react-hook-form formState · motion
Accessibility
status region; Save is ⌘S
API operations
any update; conflict from 409 version_conflict (If-Match / expected_version) e.g. admin.orders.measurements.update
Phone variant
full-width bar at the bottom
Export
UnsavedGuard · @rj/admin-kit
Props
when (isDirty)
States
closed · open
shadcn / Radix
AlertDialog
Package underneath
beforeunload + Next router guard
Accessibility
focus lands on Stay