VendHub Design System

Form Inputs

10 field types, 6 interaction states, live validation — built on Plus Jakarta Sans with token-aligned focus rings, semantic error treatment, and accessibility baked into every variant.

Work email Demo
Enter your work email — we'll send order updates here.
Auto-typing demo · Click input to type live · Click any pill to pin a state
01 · Anatomy

The Parts of an Input

Every input is composed of four optional parts — label, field, helper, and error. Hover or click any part to see its role and accessibility behavior.

We'll send order confirmations to this address.
Enter a valid email address — must include @ and a domain.
01 · LABEL
Tells the user what to enter
Always visible above the field. Asterisk denotes required. Tied to input via htmlFor for screen readers.
02 · FIELD
The interactive control
44px height, 14px padding, semibold input text. Optional left/right icons. Focus ring is always visible on keyboard navigation.
03 · HELPER
Optional context, sets expectations
12px caption beneath the field. Explains format, requirements, or what the data will be used for. Not for marketing.
04 · ERROR
Replaces helper on validation fail
Specific and actionable — never just "Invalid". Announced via aria-live="polite". Click the alert pill to preview.
02 · States

Six States, One System

Every input variant supports the same six states. Press Cycle below to watch a single field move through all of them in sequence.

Default
Hover
Focus
Error
Success
Disabled
Live Demo · Default
Resting state — no interaction yet.
03 · Field Types

Ten Live Field Types

Every input below is functional — type, click, drag, toggle. Try the password strength meter, watch the character counter shift colors, slide the range, open the custom select.

Email Inputtype="email"
Used for order confirmations.
Password + Strengthtype="password"
Strength—
Searchtype="search"
Number Steppertype="number"
Min 1, Max 999
Textarea240 char limit
Optional 0 / 240
Custom Selectanimated
Choose a vertical…
VendMarket — B2B Marketplace
VendLead — Lead Generation
VendRoute — Route Management
Equipment — Machines & Parts
Checkbox Groupmulti-select
Radio Groupsingle-select
Toggle Switchesinstant-apply
Email notifications
Order updates and shipping
SMS alerts
Time-sensitive issues only
Weekly digest
Friday summary email
Range Slider$0 – $5K
$2,100
Click anywhere on the track or drag the thumb.
04 · Live Validation

Real-Time Feedback

A working signup form. Validation fires on blur — leave a field invalid and the helper turns red. The submit button stays disabled until every rule on the right turns green.

Create your account
Start a free 14-day trial. No credit card required.
We'll send a verification link.
Must meet all rules listed beside.
Both passwords must match.
Account created
A verification email is on its way to your inbox.
Validation Rules
Valid email format
Password ≥ 8 characters
One uppercase letter
One number
Passwords match
Terms accepted