Free UK shipping over £75 — and an extra ten percent off your first muster
War DungeonThe Workbench of Warriors
⌕ ☉ ♥ Basket · 2+340 PTS
Developer reference · Login-gated

Form Field Reference

Every form input rendered in every state, with War Dungeon’s brand treatment. Use this when wiring real forms — contact, account, checkout, newsletter.

/developer/form-field-reference Admin-only · noindex Frontier (SWD1) tokens
v1 8 Jun 2026
Revision
Section 01 · Inputs accepting free text

Text inputs

Seven single-line text input types. Every state stacked vertically so you can see default through disabled without lifting a finger.

text input
type="text"
Default
Hover
Focus
Filled
Error
Order number must be at least four digits.
Disabled

OverrideInput borders use 2px ridge bronze with a 2px stamped-input shadow in caput; focus adds a 4px outer glow in sienna at 30% alpha.

email input
type="email"
Default
Hover
Focus
Filled
Error
That doesn’t look like a complete address — needs an @ and a domain.
Disabled

OverrideBrowser validation balloon suppressed; replaced by an inline italic palatino message in sienna with a stamped-roundel exclamation.

password input
type="password"
Default
Hover
Focus
Filled
Error
Twelve characters minimum — mix letters, digits, and one symbol.
Disabled

OverrideThe mask glyph stays the browser default; ridge depth removed on disabled so the field reads as inert plate, not pressed.

tel input
type="tel"
Default
Hover
Focus
Filled
Error
Digits, spaces and a leading +. Letters won’t pass dispatch.
Disabled

OverrideBrowser numeric keyboard hint preserved on mobile via the native type="tel"; brand treatment is purely visual.

url input
type="url"
Default
Hover
Focus
Filled
Error
URL needs a scheme — start with http:// or https://.
Disabled

OverrideSame baseline as text; no separate URL adornment in the visual treatment.

number input
type="number"
Default
Hover
Focus
Filled
Error
Quantity sits between 1 and 99 — the saddlebag won’t take less.
Disabled

OverrideSpinner buttons are left at browser default for the documentation form; the cart line item uses the bespoke cart-line-item__qty stepper instead.

search input
type="search"
Default
Hover
Focus
Filled
Error
A search term’s needed — try a chapter, kit, or game system.
Disabled

OverrideBrowser’s default clear (×) glyph hidden; the live-search overlay uses its own clear button in site-header__tool chrome.

Section 02 · Temporal pickers

Date & time inputs

Five date / time variants. The calendar dropdown receives brand-styled chrome — previews shown on filled state below each panel.

dateinput
type="date"
Default
Hover
Focus
Filled
Error
Tournament dates have to fall on or after today.
Disabled

OverrideNative date picker styling varies by browser; brand chrome wraps the field only. The Phase-2 implementation may swap in a JS calendar so the dropdown can carry rivet ornament and sienna day-cell highlights.

timeinput
type="time"
Default
Hover
Focus
Filled
Error
Workshop slots run 10:00–22:00 — sorry, no graveyard sessions.
Disabled

OverrideBrowser default time control retained; brand chrome wraps the field only. 24-hour format enforced by locale, not by the brand layer.

monthinput
type="month"
Default
Hover
Focus
Filled
Error
Pick a current or future month for the painting showcase entry.
Disabled

OverrideUsed on archival surfaces (creator submission month, release window). Same wrapper chrome as type="date".

weekinput
type="week"
Default
Hover
Focus
Filled
Error
Week 99 doesn’t fall in any year on earth.
Disabled

OverrideRare control — reserved for league signups and weekly tournament windows. Browser support is uneven; expect to fall back to a custom widget at Phase 2.

date-
timelocal
type="datetime-local"
Default
Hover
Focus
Filled
Error
That slot’s already been and gone — pick a future kickoff.
Disabled

OverrideUsed by the Army Builder for scheduled-match metadata. The value is captured in the user’s local time zone and re-projected to UTC server-side.

Section 03 · Multi-line

Textarea

Three sizes — small (3 rows), medium (6 rows), large (12 rows) — for everything from order notes to creator-spotlight long-form copy.

textarea
small3 rows
rows="3"
Default
Hover
Focus
Filled
Error
Keep it under 80 characters — the courier label can’t fit more.
Disabled

OverrideVertical resize handle retained; horizontal disabled to preserve column rhythm. Italic placeholder in caput at 55% alpha.

textarea
medium6 rows
rows="6"
Default
Hover
Focus
Filled
Error
Tell us a bit more — 25 characters minimum so we can route this correctly.
Disabled

OverrideDefault workshop / contact form size. Pairs with the contact-form-band catalogue block.

textarea
large12 rows
rows="12"
Default
Hover
Focus
Filled
Error
How-to guides need at least 400 words — this draft is at 5.
Disabled

OverrideReserved for creator/admin authoring surfaces. Phase 2 may swap the raw textarea for a TinyMCE instance — the wrapper chrome holds.

Section 04 · Pick one or many

Choice inputs

Selects, checkboxes, radios — with brand-styled custom indicators. Ridge bronze frames, sienna fill on checked, stamped check glyph.

selectsingle
select
Default
Hover
Focus
Filled
Error
Pick a game system so we can route your enquiry to the right specialist.
Disabled

OverrideNative chevron glyph hidden via appearance: none; replaced by a sienna SVG glyph baked into the background image.

selectmulti
multiple
Default
  • Salamanders
  • Ultramarines
  • Blood Angels
  • Dark Angels
  • Iron Hands
Hover
  • Salamanders
  • Ultramarines
  • Blood Angels
Focus
  • Salamanders
  • Ultramarines
  • Blood Angels
Filled
  • Salamanders
  • Ultramarines
  • Blood Angels
  • Dark Angels
Error
  • Salamanders
  • Ultramarines
Pick at least one chapter for your roster.
Disabled
  • Salamanders
  • Ultramarines

OverrideNative <select multiple> behaviour is ergonomically poor; production renders as this stamped option-list pattern with click-to-toggle. Selected rows take sienna fill with white text.

check
boxsingle
type="checkbox"
Default
Hover
Focus
Filled
Error
Tick to confirm before we can take the order.
Disabled

OverrideNative checkbox hidden; the visible indicator is a ridge-bronze stamped square that flips to sienna fill with a white check glyph when checked.

check
groupmulti
type="checkbox" ×n
Default
Filled
Hover
Focus
Error
Pick at least one game system you play.
Disabled

OverrideUse <fieldset> wrapping the group with a <legend> for accessibility; the visual treatment is the same per-row indicator as the single checkbox.

radiosingle
type="radio"
Default
Hover
Focus
Filled
Error
Pick an address before we can move you to dispatch.
Disabled

OverrideNative radio hidden; visible indicator is a ridge-bronze stamped circle with a sienna inner dot (with 1px caput ring) when selected.

radio
groupsingle-of-n
type="radio" ×n
Default
Hover
Focus
Filled
Error
Pick a delivery option to continue.
Disabled

OverrideProduction checkout uses the catalogue’s shipping-method-option block, which adds price and ETA chrome around the radio — the bare radio shown here is the underlying primitive.

Section 05 · Numeric drag

Range & sliders

Single-value range and dual-handle price filter. Track in ridge bronze; thumb a stamped brass roundel with hard-edged offset shadow.

rangesingle
type="range"
Default
£030%£500
Hover
£030%£500
Focus
£050%£500
Filled
£0£390£500
Error
£0£25£500
Budget below the minimum kit price — nudge the slider up a touch.
Disabled
£030%£500

OverrideNative <input type="range"> styled via the custom track and thumb wrapper. Phase 2 will wire up the underlying input for keyboard accessibility.

rangedual
noUiSlider
Default
£0£100–£350£500
Hover
£0£100–£350£500
Focus
£0£100–£350£500
Filled
£0£120–£320£500
Error
£0£350–£390£500
No products in that price band — widen the range.
Disabled
£0£100–£350£500

OverrideBuilt on the noUiSlider library at Phase 2; thumb + track wrapper inherits the brand-stamped chrome. Used in the filter-sidebar price filter on shop archives.

Section 06 · Uploads

File inputs

Single, multi, and drag-drop. The drag-drop zone is framed with the plated-frame catalogue block + dotted-bronze inner border + stamped-roundel upload glyph.

filesingle
type="file"
Default
Hover
Focus
Filled
Error
JPEG or PNG only, 8 MB or less — the workshop server’s on a strict diet.
Disabled

OverrideNative file control hidden; visible chrome is a sienna stamped button + italic filename strip on white. Caption flips to non-italic liquourice when a file is chosen.

filemulti
multiple
Default
Hover
Focus
Filled
Error
Up to 8 files per submission, please — otherwise the reviewer’s saddle gets sore.
Disabled

OverrideSame chrome as single-file; the difference is the multiple attribute on the underlying input and the count prefix in the filename strip.

drag
dropzone
drop-zone
Default
⬆

Drop your painted-mini photos here

JPEG or PNG, up to 8 MB each, 8 files max

Hover
⬆

Release to upload

JPEG or PNG, up to 8 MB each, 8 files max

Focus
⬆

Press space to browse

JPEG or PNG, up to 8 MB each, 8 files max

Filled
✓

3 photos loaded

salamanders-front.jpg, side.jpg, base.jpg · ready to send

Error
!

Wrong format

Tried to drop a .heic — convert to JPEG and try again

HEIC isn’t supported; JPEG or PNG only.
Disabled
⬆

Uploads paused

Workshop reviewers off duty — back at 09:00.

OverrideDrop zone is wrapped in the catalogue’s plated-frame block to keep its visual register identical to creator-portrait and hero media plating. Dotted bronze inner border thickens to solid sienna on focus / error / filled (positive variant).

Section 07 · Edge cases

Special inputs

Colour picker preset to the brand palette swatches, and a documented panel for the hidden field so it doesn’t go unseen.

colourinput
type="color"
Default
#C5A688
Hover
#F4A479
Focus
#832D15
Filled
#832D15
Error
#00FF00
Off-brand — pick a colour from the workshop palette below.
Disabled
#C5A688

OverrideNative type="color" is hidden; visible chrome is a ridge-bronze stamped swatch with a monospace hex caption, plus a row of brand-palette preset chips for the operator to click. The selected preset shows a caput outline.

hiddenfield
type="hidden"
Documented
<input type="hidden" name="form_id" value="contact-workshop-v1">
<input type="hidden" name="csrf_token" value="3f7e…d8">
<input type="hidden" name="referrer" value="/learn/how-to/salamanders/">

Hidden fields render zero pixels — included here for developer awareness of their presence in the payload. Always paired with a CSRF token and a form-identifier value so the handler routes correctly.

OverrideNo visual treatment — the brand chrome doesn’t apply. The dark stamped doc card is a developer-affordance pattern, not a runtime control.

Section 08 · Action triggers

Submit & buttons

Primary, secondary, tertiary, destructive, disabled — each across default / hover / focus / pressed / disabled.

primarysubmit
.ff__btn
Default
Hover
Focus
Pressed
Disabled

OverrideSienna fill, white modesto-condensed text, 2px ridge bronze border, stamped 2px caput offset shadow. Hover translates the button up-left by 1px and grows the shadow to 3px; pressed re-seats it.

secondaryoutline
.ff__btn--secondary
Default
Hover
Focus
Pressed
Disabled

OverrideTransparent fill, ridge-bronze frame, liquourice text. Same shadow profile as primary so the pair sit at the same visual altitude on the page.

tertiarytext-link
.ff__btn--tertiary
Default
Hover
Focus
Pressed
Disabled

OverrideSienna text, underline at 4px offset, no border, no shadow. Reads as a link — reserved for low-stakes secondary actions next to a primary submit.

destruc
tivecaution
.ff__btn--destructive
Default
Hover
Focus
Pressed
Disabled

OverrideCowboy fill, sienna outline + sienna text, leading triangle warning glyph. Always second to a primary “Keep” / “Cancel” in confirmation dialogs.

Closing reference

Notes for the developer

Four short notes for the Phase-2 developer wiring real forms. Read these before the first <form> ships.

Where form styles live

All the form-field chrome on this page is authored in the brand silo at wp-content/themes/war-dungeon/assets/scss/components/_forms.scss — the same tokens declared in the styleguide’s :root are what every input draws from. Don’t override token values inline; if a new ridge width or shadow profile is genuinely needed, add a token first, then reference it from the component file. The state stand-in classes you see in this reference (.ff--hover, .ff--focus, etc.) exist for the reference page only; in real forms the corresponding pseudo-classes (:hover, :focus-visible) and ARIA states ([aria-invalid]) drive the same rules.

Honeypot + CSRF conventions

Every public-facing form ships with a CSRF token from wp_create_nonce() and a honeypot input named website — rendered offscreen via aria-hidden + tabindex="-1", not display: none (which some bots skip). The handler discards any submission where the honeypot is populated. The token name is _wpnonce; the action is the form’s ID-slug. Account, checkout, and admin forms additionally guard against replay with a 15-minute token TTL.

Inline validation patterns + error placement

Error messages render beneath the field they describe, in the italic palatino sienna treatment shown in this reference — never as a toast, never as a popover. The exclamation-roundel glyph is part of the message, not a separate element, so screen-readers announce it inline. Group-level errors (multi-field rules: “Pick at least one chapter”) attach to the <fieldset>’s <legend>. Submit-time errors scroll the first invalid field into view and shift focus to it; in-line edits clear the error as soon as the field validates.

Accessibility notes (labels, ARIA, focus order)

Every input has a real <label> with a for= attribute — placeholders are never used as labels (they vanish on type and fail contrast tests). Required fields take aria-required="true"; invalid ones take aria-invalid="true" and aria-describedby pointing at the error-message ID. Focus order follows DOM order — do not use tabindex values above zero. The focus ring (4px sienna at 30% alpha) is mandatory; suppressing it for visual reasons is a bug, not a preference.

Free UK Shipping

On every order over £75.

30-Day Returns

No fuss, no formalities.

Multi-Game Expertise

40K · AoS · Old World · D&D.

A Nerdworks Brand

Cross-brand loyalty.