Admin form
A create-or-edit record screen composed from breadcrumbs, a wizard step list, alerts, six field components and a button row; the review step is a table with an Edit button per row.
stable · light DOM · 4.0.0. Light DOM retains static content, native semantics, label relationships and host composition without duplicating controls.
Live variants
default
Project details
Review the local values before passing them to your app.
Review values
<j3w1-admin-form id="example-admin-form-default"><section class="admin-form"><h2 class="admin-form-title">Project details</h2><p>Review the local values before passing them to your app.</p><form data-native-form=""><fieldset class="fieldset"><legend>Project information</legend><j3w1-text-field><div class="text-field"><label class="text-field-label" for="example-admin-form-default-project-name">Project name</label><div class="text-field-root"><input class="text-field-input" id="example-admin-form-default-project-name" name="example-admin-form-default-project" value="Atlas library" required=""></div></div></j3w1-text-field><j3w1-textarea><div class="textarea"><label class="textarea-label" for="example-admin-form-default-project-notes">Notes</label><textarea class="textarea-input" id="example-admin-form-default-project-notes" name="example-admin-form-default-notes" rows="3">A reusable component library.</textarea></div></j3w1-textarea><j3w1-select><div class="select"><label class="select-label" for="example-admin-form-default-project-scope">Scope</label><div class="select-root"><select class="select-control" id="example-admin-form-default-project-scope" name="example-admin-form-default-scope"><option value="library">Library</option><option value="application">Application</option></select></div></div></j3w1-select></fieldset><div class="form-tool-actions"><button class="button" type="submit">Review values</button><button class="button button-secondary" type="reset">Reset</button></div></form><section data-form-review="" hidden="" aria-label="Review project values"><h3 tabindex="-1">Review values</h3><table class="table"><caption>Values to pass to the host</caption><tbody></tbody></table><div class="form-tool-actions"><button class="button button-secondary" type="button" data-form-edit="">Edit values</button><button class="button" type="button" data-form-confirm="">Confirm values</button></div></section><p role="status" data-form-status=""></p></section></j3w1-admin-form>review
Project details
Review the local values before passing them to your app.
Review values
<j3w1-admin-form id="example-admin-form-review"><section class="admin-form" data-start="review"><h2 class="admin-form-title">Project details</h2><p>Review the local values before passing them to your app.</p><form data-native-form=""><fieldset class="fieldset"><legend>Project information</legend><j3w1-text-field><div class="text-field"><label class="text-field-label" for="example-admin-form-review-project-name">Project name</label><div class="text-field-root"><input class="text-field-input" id="example-admin-form-review-project-name" name="example-admin-form-review-project" value="Atlas library" required=""></div></div></j3w1-text-field><j3w1-textarea><div class="textarea"><label class="textarea-label" for="example-admin-form-review-project-notes">Notes</label><textarea class="textarea-input" id="example-admin-form-review-project-notes" name="example-admin-form-review-notes" rows="3">A reusable component library.</textarea></div></j3w1-textarea><j3w1-select><div class="select"><label class="select-label" for="example-admin-form-review-project-scope">Scope</label><div class="select-root"><select class="select-control" id="example-admin-form-review-project-scope" name="example-admin-form-review-scope"><option value="library">Library</option><option value="application">Application</option></select></div></div></j3w1-select></fieldset><div class="form-tool-actions"><button class="button" type="submit">Review values</button><button class="button button-secondary" type="reset">Reset</button></div></form><section data-form-review="" hidden="" aria-label="Review project values"><h3 tabindex="-1">Review values</h3><table class="table"><caption>Values to pass to the host</caption><tbody></tbody></table><div class="form-tool-actions"><button class="button button-secondary" type="button" data-form-edit="">Edit values</button><button class="button" type="button" data-form-confirm="">Confirm values</button></div></section><p role="status" data-form-status=""></p></section></j3w1-admin-form>Install and register
Use the exact version. If npm publication is pending, install the release tarball from the installation guide.
npm install --save-exact @j3w1/ui@4.0.0import '@j3w1/ui/tokens.css';
import '@j3w1/ui/styles/admin-form.css';
import '@j3w1/ui/register/admin-form';Insert the maintained markup above after loading these imports. Its native children provide accessible names and form behavior; the empty custom tag alone does not create a control.
Copy the complete implementation
npx --package=@j3w1/ui@4.0.0 j3w1-ui copy admin-form --out ./vendor/j3w1/admin-formThe CLI verifies every file before writing and refuses overwrites. Serve the output over HTTP and open index.html. Keep its modules, CSS, tokens and licence notices together.
Public API
attributes
| Name | Type / signature | Meaning |
|---|---|---|
disabled | CustomEvent | Disable the native controls owned by this instance. |
loading | CustomEvent | Mark the primary control busy and prevent duplicate activation. |
properties
| Name | Type / signature | Meaning |
|---|---|---|
disabled | boolean | Delegates disabled state to native children. |
name | string | Native control name; application form keys remain explicit. |
methods
| Name | Type / signature | Meaning |
|---|---|---|
refresh | (): void | Reconnect behavior after replacing native child structure. |
focus | (options?: FocusOptions): void | Focus the first usable native control. |
events
| Name | Type / signature | Meaning |
|---|---|---|
j3w1-submit | CustomEvent | Validated local native form values; the host owns saving. |
Dependencies and verification
Registered components: text-field, textarea, select. Style dependencies: button, field, text-field, checkbox, radio-group, select, switch, textarea, fieldset, table.
Package presence establishes an available implementation. Actual passes depend on the tested artifact and environment. Read specification execution evidence; read packed-consumer evidence; inspect the complete state matrix.
Full implementation manifest, API and token dependency closure
Canonical specification
Admin form admin-form
A create-or-edit record screen composed from breadcrumbs, a wizard step list, alerts, six field components and a button row; the review step is a table with an Edit button per row.
Report an issue with this component
Tokens
Focus a role to inspect its values; follow its link for persistent usage and source details.
| Part | Role | Value | Use |
|---|---|---|---|
root.bg | color.surface.defaultapproveduse | #0d0707 | D-041 surface.default: color.primitive.modern.panel. |
root.border | color.border.defaultapproveduse | #482b2b | D-041 border.default: color.primitive.modern.divider. |
crumbs.link | color.text.linkapproveduse | #f73f35 | Strong red link text, distinct from rose body text and headings; retain the underline. |
crumbs.current | color.text.brightapproveduse | #ffa2a7 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
title.text | color.text.brightapproveduse | #ffa2a7 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
step.text | color.text.defaultapproveduse | #e99499 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
step.current-text | color.text.brightapproveduse | #ffa2a7 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
step.current-indicator | color.border.selected-indicatorobserveduse | #e53935 | 2px indicator bar on the selected tab or nav item. |
step.complete | color.status.success.textapproveduse | #82d9a0 | D-041 status.success.text: color.primitive.modern.green. |
step.invalid | color.status.danger.textobserveduse | #f07178 | D-041 readable error text on neutral surfaces and native warning tints. |
notice.tint | color.status.info.tintapproveduse | #0f141c | Info background tint. |
notice.border | color.status.info.borderapproveduse | #82b4ff | D-041 status.info.border: color.primitive.modern.blue. |
notice.text | color.status.info.textapproveduse | #82b4ff | D-041 status.info.text: color.primitive.modern.blue. |
summary.tint | color.status.danger.tintobserveduse | #2b0e0d | Danger background tint. |
summary.border | color.status.danger.borderobserveduse | #e53935 | Danger border, 2px on invalid inputs. |
summary.text | color.status.danger.textobserveduse | #f07178 | D-041 readable error text on neutral surfaces and native warning tints. |
field.bg | color.surface.inputapproveduse | #000000 | Form-control fill. |
field.border | color.border.controlapproveduse | #c81a1a | D-041 owner correction: red control and floating-frame borders, distinct from rose text. |
field.text | color.text.defaultapproveduse | #e99499 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
field.label | color.text.brightapproveduse | #ffa2a7 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
field.help | color.text.mutedapproveduse | #d4868b | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
field.affix | color.text.mutedapproveduse | #d4868b | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
invalid.border | color.status.danger.borderobserveduse | #e53935 | Danger border, 2px on invalid inputs. |
invalid.message | color.status.danger.textobserveduse | #f07178 | D-041 readable error text on neutral surfaces and native warning tints. |
disabled.bg | color.interaction.disabled.bgapproveduse | #0d0707 | D-041 interaction.disabled.bg: color.primitive.modern.panel. |
disabled.text | color.text.disabledapproveduse | #a3676b | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
disabled.border | color.border.disabledapproveduse | #482b2b | D-041 border.disabled: color.primitive.modern.divider. |
review.key | color.text.mutedapproveduse | #d4868b | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
review.header-rule | color.border.strongobserveduse | #9e231f | Emphasised 2px rule: sticky headers, section ends. |
review.row-rule | color.border.dividerapproveduse | #482b2b | D-041 border.divider: color.primitive.modern.divider. |
footer.border | color.border.dividerapproveduse | #482b2b | D-041 border.divider: color.primitive.modern.divider. |
continue.bg | color.action.primary.bgapproveduse | #7d1310 | Primary button fill; D-026 darkened it off color12, which stays fixed as heritage ANSI 12. |
continue.text | color.action.primary.textapproveduse | #ffa2a7 | Primary action labels: bright rose across rest, hover and pressed states (D-033). |
continue.busy-glyph | color.action.primary.textapproveduse | #ffa2a7 | Primary action labels: bright rose across rest, hover and pressed states (D-033). |
back.text | color.action.secondary.textapproveduse | #ffa2a7 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
back.border | color.action.secondary.borderapproveduse | #986f72 | D-041 action.secondary.border: color.primitive.modern.control. |
draft.text | color.action.tertiary.textapproveduse | #e99499 | D-041 owner correction: rose is the default UI and reading foreground; near-white is reserved for document headings, highlights and contrast-critical fills. |
draft.bg-hover | color.action.tertiary.hover-bgobserveduse | #1c0a09 | Ghost and icon button hover. |
State matrix
Every declared state and combination, statically rendered; the default cell is live. Sizes: compact, comfortable (switch with the density control above).
| State | Identity step | Review step | ||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
default | New workstation
Draft
Nothing is created until Review; Save draft keeps the record locally.
Two fields need attention
The name and the hostname are already in use; choose different ones. Shown in the bar and the records list. Letters, digits and hyphens; the domain is fixed. Decides the default workspace layout. Today if left unchanged.
No file chosen
One .pub file; ed25519 preferred. 31 / 200 Plain text; shown on the record page. | New workstation
Review
Edit returns to the step that owns the value; Save creates the record.
Two fields need attention
The name and the hostname are already in use; edit the Identity step.
| ||||||||||||||||||||||||
invalid | ||||||||||||||||||||||||||
busy | ||||||||||||||||||||||||||
disabled |
Purpose
A record screen proving that the advanced form components compose with the navigation and feedback components, then the same screen at its review step. It shows validation, saving and inertness across a whole form; it does not prescribe a product.
Anatomy
Parts as listed in the anatomy; each is the contained component’s own markup and classes.
States
| State | Visual | Non-colour channel |
|---|---|---|
| default | every component’s rest tokens on color.surface.default; the current step carries the indicator bar, future steps are disabled | aria-current="step" |
| invalid | name and hostname take the 2px color.status.danger.border and ✕ messages; the current step’s marker becomes ✕; a danger summary on color.status.danger.tint naming the two fields replaces the notice; other fields stay at rest | border 1 → 2px; glyphs; aria-invalid; role="alert" |
| busy | Continue shows the static ⋯ in color.action.primary.text; nothing shrinks or animates | glyph; aria-busy on the form; cursor: progress |
| disabled | every control takes its component’s disabled treatment (color.text.disabled, color.border.disabled, color.interaction.disabled.bg); labels and review keys dim; no hover | disabled on the wrapping fieldset; cursor: not-allowed; never opacity |
Contained components keep their own hover, focus-visible, required, placeholder-shown and read-only states; this table adds only the form-level ones.
Keyboard
The region, the Breadcrumb navigation and the form are offered as landmarks by name. In the review variant the Edit buttons are ordinary stops inside the table. Nothing traps focus.
Accessibility
The h2 names both the region and the form. Complete steps read ”, complete”
through a visually hidden suffix; future steps are disabled, not hidden. The
summary alert is announced once on submit; each field’s message stays linked
by aria-describedby. Inside the disabled fieldset every control reports its
state natively. The review table has a caption, column headers and row
headers; each Edit button names its field through a visually hidden suffix.
Text meets 4.5:1 and the invalid boundary 3:1; disabled text is exempt (house
floor 3:1).
Portability
No script is needed to render any state. Toolkits port each contained component through its own mapping.
Non-examples
A rounded card with a drop shadow. A Material stepper with numbered circles and a connecting line. A red banner across the whole form instead of the summary alert plus field messages. Field borders that glow red. A spinner replacing the Continue label. Fields fading to half opacity while saving. A sticky footer bar with a shadow.
Contrast report
22 declared pairs measured on resolved sRGB values with the WCAG 2.x formula; 0 waived (decorative only), 0 failing. A pass is a design target for the named role, not an application-wide conformance claim.
| Pair | State | Kind | Foreground | Background | Ratio | Min | Result |
|---|---|---|---|---|---|---|---|
| admin-form default text | default | text | color.text.default #e99499 | color.surface.input #000000 | 9.16 | 4.5 | pass |
| admin-form default border | default | ui | color.border.control #c81a1a | color.surface.input #000000 | 3.62 | 3 | pass |
| admin-form invalid text | invalid | text | color.status.danger.text #f07178 | color.status.danger.tint #2b0e0d | 6.27 | 4.5 | pass |
| admin-form invalid border | invalid | ui | color.status.danger.border #e53935 | color.status.danger.tint #2b0e0d | 4.24 | 3 | pass |
| admin-form busy text | busy | text | color.action.primary.text #ffa2a7 | color.action.primary.bg #7d1310 | 5.57 | 4.5 | pass |
| title, labels and the current step on the panel surface | — | text | color.text.bright #ffa2a7 | color.surface.default #0d0707 | 10.45 | 4.5 | pass |
| help, affix and review keys on the panel surface | — | text | color.text.muted #d4868b | color.surface.default #0d0707 | 7.22 | 4.5 | pass |
| breadcrumb links on the panel surface | — | text | color.text.link #f73f35 | color.surface.default #0d0707 | 5.44 | 4.5 | pass |
| complete-step check | — | text | color.status.success.text #82d9a0 | color.surface.default #0d0707 | 11.79 | 4.5 | pass |
| notice title on its tint | — | text | color.status.info.text #82b4ff | color.status.info.tint #0f141c | 8.73 | 4.5 | pass |
| notice text on its tint | — | text | color.text.default #e99499 | color.status.info.tint #0f141c | 8.06 | 4.5 | pass |
| summary text on the danger tint | invalid | text | color.text.default #e99499 | color.status.danger.tint #2b0e0d | 7.82 | 4.5 | pass |
| field messages on the panel surface | invalid | text | color.status.danger.text #f07178 | color.surface.default #0d0707 | 6.98 | 4.5 | pass |
| invalid field boundary | invalid | ui | color.status.danger.border #e53935 | color.surface.input #000000 | 4.97 | 3 | pass |
| current-step indicator bar | — | ui | color.border.selected-indicator #e53935 | color.surface.default #0d0707 | 4.73 | 3 | pass |
| Back button and file-input button boundaries | — | ui | color.action.secondary.border #986f72 | color.surface.default #0d0707 | 4.62 | 3 | pass |
| disabled control text (exempt; house floor 3:1) | disabled | ui | color.text.disabled #a3676b | color.interaction.disabled.bg #0d0707 | 4.48 | 3 | pass |
| disabled labels and review keys (exempt; house floor 3:1) | disabled | ui | color.text.disabled #a3676b | color.surface.default #0d0707 | 4.48 | 3 | pass |
| disabled boundaries (exempt) | disabled | ui | color.border.disabled #482b2b | color.interaction.disabled.bg #0d0707 | 1.58 | 1 | pass |
| review header rule (decorative) | — | ui | color.border.strong #9e231f | color.surface.default #0d0707 | 2.58 | 1 | pass |
| panel edge (decorative) | — | ui | color.border.default #482b2b | color.surface.default #0d0707 | 1.58 | 1 | pass |
| step, row and footer rules (decorative) | — | ui | color.border.divider #482b2b | color.surface.default #0d0707 | 1.58 | 1 | pass |
Keys
| Key | Action |
|---|---|
| Tab / Shift+Tab | Breadcrumb links, the reachable step buttons, then every field in reading order, then Back, Save draft and Continue; the file-input's native input is the stop and its button label is drawn with the ring. |
| Enter | Follows a breadcrumb, activates a step or a button; in a text field submits the form in a host. |
| Space | Toggles the checkbox; opens the file chooser from the file-input. |
| Arrow keys | Move within the select and the date field's segments. |
| Escape | Nothing; the screen is not a dialog. |
For agents
Component JSON ·Implementation brief ·Build a task kit ·
Related: breadcrumbs wizard alert text-field select date-picker file-input textarea checkbox button table
Stress fixtures: FX-STATE-MATRIX FX-LONG FX-320 FX-360 FX-ZOOM-200 FX-RM FX-HC FX-I18N FX-RTL FX-DENSITY