J3W1 / DESIGN SYSTEM
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 · 1.1.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@1.1.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@1.1.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
Purpose
A record screen that proves the advanced form components compose with the navigation and feedback components: a trail, a heading, a step list, a notice, a grid of fields and a row of actions, then the same screen at its review step. It exists to show validation, saving and inertness across a whole form, not to prescribe a product.
Anatomy
The region landmark; the breadcrumbs (Records / Workstations / New); the h2
in color.text.bright; the wizard step list with the current step on the
2px color.border.selected-indicator; an info alert on
color.status.info.tint; the form landmark holding the name and hostname
text-fields, the role select, the commissioned-on date-picker, the SSH-key
file-input, the notes textarea with its count and the enable checkbox; the
footer rule and the Back, Save draft and Continue buttons. The review
variant replaces the fields with a table whose row headers are the field
names in color.text.muted and whose last column is a tertiary Edit button.
Every part is the component’s own markup and classes.
States
| State | Visual | Non-colour channel |
|---|---|---|
| default | rest tokens of every component on color.surface.default; the current step carries the indicator bar, future steps are disabled | aria-current="step" |
| invalid | the name and hostname fields take the 2px color.status.danger.border and show their ✕ messages; the current step’s marker becomes ✕; a danger alert on color.status.danger.tint summarising the two fields replaces the notice; the other fields stay at rest | border width 1 → 2px; glyphs; aria-invalid; role="alert" |
| busy | Continue shows the static ⋯ glyph in color.action.primary.text; the form carries aria-busy; nothing shrinks or animates | glyph; aria-busy; 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 anywhere | disabled on the wrapping fieldset; cursor: not-allowed; never opacity |
The composed components keep their own hover, focus-visible, required, placeholder-shown and read-only treatments; this specimen declares only the states the whole form adds to them.
Keyboard
Landmarks first: the region, the Breadcrumb navigation and the form are offered by name. Tab walks the trail, the reachable steps, the fields in reading order and the three buttons; the file-input’s hidden native input is the stop and its visible button label is drawn with the ring. The select and the date field move with arrows inside one stop. In the review variant the Edit buttons are ordinary stops inside the table. Nothing traps focus.
Accessibility
The region and the form are both named by the h2. Complete steps read ”, complete”
through a visually hidden suffix; future steps are disabled, not hidden.
The notice is role="status" and the invalid summary is role="alert", so
the summary is announced once on submit while each field’s message stays
linked by aria-describedby; aria-invalid is set only after submit. While
saving the form carries aria-busy and, once inert, sits inside a disabled
fieldset so 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. Contrast: notice title 6.5:1 or better on
its tint, messages 5.26:1 on the panel surface, the invalid boundary 4.69:1
on the input surface, disabled text 3.24:1 (exempt).
Portability
Landmarks, native controls, one container query and three root hooks
(data-state-invalid, data-state-busy, data-state-disabled); no script
is needed to render any state. Hosts without container queries stack the
footer at the 600px viewport breakpoint. The 56rem reference width and the
two-column field grid are layout of this specimen and not rules; the
specimen proves composition, not a product. Toolkits port each contained
component through its own mapping.
Non-examples
A rounded card with a drop shadow around the form. A Material stepper with circular numbered badges and a connecting line. A red banner across the whole form instead of the summary alert plus field messages. Fields whose borders glow red. A spinner replacing the Continue label. Saving while the fields fade to half opacity. Placing the actions in a sticky footer bar with a shadow.