ARTSABERS · Form Component Spec · V1

Form Patterns

Reference specification for every form-bearing template on the ARTSABERS site — checkout, contact, my-account, product configurator. Three worked examples show the components in real composition; the appendix at the bottom covers the states the examples don't naturally reach.

StyleguideSAS1 · Kyber Hull Font stackSpace Grotesk / Manrope Radius0px sitewide FocusEmber, not blue

Worked Example 01 · Checkout

Billing & Shipping Address

Demonstrates: section headings, fieldset grouping, required indicator, optional label, two- and three-column splits, help text, country picker with flags + search (shown open), conditional field group, textarea.

Billing Address

First name*

Last name*

Email address*

For order updates + delivery ETAs.

Phone*

The courier will use this for delivery ETAs and access.

Country / Region*

🇺🇸 United States

🇬🇧 United Kingdom

🇦🇪 United Arab Emirates

🇦🇺 Australia

🇨🇦 Canada

Address line 1*

Address line 2 Optional

Town / City*

Postcode*

State*

Auto-swaps to State picker for US / CA / AU; hides for regions without one.

Order notes Optional

Delivery instructions, buzzer code, etc.

Shipping Address

Ship to a different address

First name*

Last name*

Address line 1*

Town / City*

Postcode*

State*

Worked Example 02 · Contact

Get in Touch

Demonstrates: select dropdown (closed state), character counter, checkbox (default unchecked), primary + secondary action pair. Compact form pattern suitable for the future Contact page.

First name*

Last name*

Email*

Subject* 42 / 100

How can we help?*

Message* 318 / 2000

Subscribe to occasional updates about new hilts and offers.

Reset form

Worked Example 03 · My Account

Edit Profile

Demonstrates: filled state, section divider, password input with show/hide toggle + strength meter, vertical checkbox group, radio group (with selected), primary + secondary action, disabled-until-dirty submit (shown in states appendix).

Account Details

First name*

Last name*

Display name*

How your name appears on reviews you leave.

Email*

Used for order updates + account login.

Change Password

Current password*

New password*

StrengthStrong

Confirm new password*

Preferences

Email Preferences

Product launch emails Restock alerts for wishlisted items Occasional community + duelling event updates

Newsletter frequency

Weekly Monthly Only for major drops

Cancel

States Appendix

Component States Reference

Every state the three worked examples don't naturally reach — one row per component group, side-by-side variants labelled beneath. Downstream templates match these verbatim.

Default — empty, label above

Focus — ember hairline + glow

Filled — has value, no focus

!Please enter a valid email address.

Error — forge-red + inline message

Disabled — hatched, muted

Success — ember tick to the right

Saber Core

Default — closed, placeholder

Saber Core

S-RGB

RGB-X

SNV4 PRO

Xenopixel V3

Proffie 2.2

Open — dropdown, hover on option 3

Saber Core

Selected — has a value

Saber Core

!Please choose a Saber Core.

Error — forge-red hairline

Checkbox Radio

Default — unchecked

Checkbox Radio

Checked — ember tick / dot

Checkbox Radio

Focus — ember ring at 20%

Checkbox Radio

Disabled — hatched, muted

Parent (some)

Checkbox only

Indeterminate — parent-of-group

Primary default — ember ombre gradient

Primary hover — brighter + intensified glow

Primary loading — spinner + Sending…

Primary disabled — muted, no glow (until dirty)

Reset form

Secondary default — ember hairline underline

Reset form

Secondary hover — brighter ember underline glow

Default — value 1

Focus — on the value input

At minimum — minus disabled

At maximum — plus disabled

Email*

Required indicator — ember asterisk after label

Address line 2 Optional

Optional indicator — muted uppercase tag

For order updates + delivery ETAs.

Help text — muted body font below input

42 / 100

Character counter — right-aligned muted, tabular

!Please enter a valid email address.

Inline error — forge-red text + warning glyph

Preferences saved.

Success message — ember text + tick glyph