SuperCat Design System · Form primitives

Forms `.kf-input · .kf-check · .kf-switch · .kf-field`

01 · Input · types

Text

Default — single line, any text.

Email keyboard on mobile.

Password

Eye toggle reveals · type stays “password” for managers.

Leading icon slot.

Quantity

Hold to repeat · accelerates after 1s.

Ship by

Custom calendar · still typeable.

Tier

Order note Optional

Visible to dealer + warehouse.

0 / 500

Clearable

02 · Input · states

Default · empty

Hover

Focus

Filled

Disabled

Read-only

03 · Input · sizes

sm · 32px

md · 40px

lg · 48px

04 · Validation tones

PO number

Looks good — checked against last 90 days.

Dealer email

That email is on the do-not-contact list. Confirm before sending.

Quantity

Maximum order qty is 250. Split into multiple orders.

04b · Async checks · error shake · `data-kf-async`

Try taken@dealer.com — spinner runs ~700ms then errors. Anything else passes.

Username

3+ chars required. Names containing "admin" reserved.

Submit to shake

PO must be at least 10 characters.

05 · Checkbox · `.kf-check`

Default Email me when this order ships

Checked Auto-apply line discount

Indeterminate Select all (12 of 24 selected)

Disabled Locked — admin only

Disabled · checked Required by tier policy

Error I confirm this order is final

Sizes

sm md lg

Order options

Auto-sync to Highpoint Sends order data to the rep's calendar within 5 minutes. Notify accounting CC the AP team on the dealer confirmation. Apply early-pay discount 2% off if paid within 10 days of invoice.

06 · Radio · `.kf-check` + `type="radio"`

Pricing tier

Tier 1 · MAP Minimum advertised price. Honors retail floors across all channels. Tier 2 · Wholesale Standard wholesale. 35–45% off MAP depending on volume. Tier 3 · Distributor Distributor pricing. Requires signed distribution agreement. Tier 4 · Strategic — invite only Bespoke pricing. Negotiated per program.

Inline radios

Ground 2-day Next-day Will call

07 · Switch · `.kf-switch`

Off Auto-sync orders to Highpoint

On Email me daily order summary

Disabled · off Locked by admin policy

Disabled · on Required by tier program

Sizes

sm md lg

08 · Inline fields

Region

Sales rep

Ship by

09 · Real form composition

Inputs · checks · switches · field wrappers — paired with .kb buttons. The whole thing flips for dark theme via the toolbar toggle.

New order

Spring/Summer 2026 · all fields required unless marked optional.

Dealer

Buyer

Tier

Ship by

PO number Optional

Order note

Visible to dealer + warehouse.

142 / 500

Auto-apply early-pay discount (2% if paid within 10 days) CC accounting on dealer confirmation Sync to Highpoint immediately

Forms .kf-input · .kf-check · .kf-switch · .kf-field

01 · Input · types

02 · Input · states

03 · Input · sizes

04 · Validation tones

04b · Async checks · error shake · data-kf-async

05 · Checkbox · .kf-check

06 · Radio · .kf-check + type="radio"

07 · Switch · .kf-switch

08 · Inline fields

09 · Real form composition

New order

Forms `.kf-input · .kf-check · .kf-switch · .kf-field`

04b · Async checks · error shake · `data-kf-async`

05 · Checkbox · `.kf-check`

06 · Radio · `.kf-check` + `type="radio"`

07 · Switch · `.kf-switch`