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

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:CompactComfortableLaravel · navyDTC · midnight green

Anatomy States Density EN · 中文 Edge cases Contract

Anatomy

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

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

Long form in place

Section nav (step-rail long-form mode) on the left, sections on the right, the dark pending-changes bar Frank praised in the Access console.

BasicsNames (EN / CN)2ProductionLinks and blockersValidation

Long-form mode: scroll-spy, error count per section, ⌥↓ jumps to the first error.

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

3 unsaved changesSupplier · Fabric Surcharge (cm) · Show in Bulk Hub

States

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

clean

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

dirty · 3 changes

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

3 unsaved changesSupplier · Fabric Surcharge (cm) · Show in Bulk Hub

saving

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

Saving…PUT /admin/designs/1287

saved

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

SavedAll changes saved · 14:32

validation summary

Production

1 error

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

-3

Must be 0 or more

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

2 fields need fixingFabric Surcharge (cm) · System (Chinese)

conflict (Q22)

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

Someone else changed thisK. Osei saved Supplier at 14:29 (UTC+8). Your 3 changes are kept.

unsaved guard

Leave without saving?

You have 3 unsaved changes on Design 1287 (Notch lapel). They are lost if you leave.

Density

Compact (2b ultra, the default) and comfortable, side by side. Same markup, only the density tokens change.

compact · default · data-density=compact

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

comfortable · data-density=comfortable

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

English · 中文

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

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

中文 · lang=zh-Hans

生产

产品

Jacket

创建后只读

类型

8 - Radio + Image + Popup

供应商

SYC

面料附加 (cm)

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

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

Shanghai Yongchang Tailoring Accessories & Trims Co. (primary) — backup SQF

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

permission denied

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

Both apps

One @rj/admin-kit component, two themes: the Laravel admin (navy pinned) and the DTC admin (kit v4 Midnight green), by token swap only.

Laravel admin · :root

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

DTC admin · data-theme=dtc

Production

Product

Jacket

Read only after create

Type

8 - Radio + Image + Popup

Supplier

SYC

Fabric Surcharge (cm)

12.5

Extra meterage on the buying sheet, not money

Show in Bulk Hub

Parent Level Error Validation

Online means they must make a design selection

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