FORMS · FORM ELEMENTS

Inputs

Text fields, masks, tags and codes. Every field here validates, formats or talks to a fake server.

THEME

DENSITY

Playground

Type, size, state and label — the field and its a11y tree update live

PREVIEWLive · type to validate

Work email

We’ll send the invite here

ACCESSIBILITY TREE

roletextbox

name"Work email" · from <label for>

description"We’ll send the invite here"

valueempty

statesrequired

Settings

TYPE

SIZE

LABEL

STATE

CODE

<Input type="email" label="Work email" placeholder="name@studio.com" icon={<Mail />} clearable hint="We’ll send the invite here" required/>

Variants

12 field patterns, all working

Text & emailtype="text" · type="email"

Client name

As it appears on invoices

Work email

Passwordshow / hide · Caps Lock · confirm

Password

Toggle the eye to check what you typed

Confirm password

Number steppermin 1 · max 20 · ↑ ↓ keys

Seats

4 seats × $12 = $48 / month

Searchtype="search" · Esc clears

Search projects

⌘ K

Esc clears the field

Floating labellabel shrinks, never disappears

First name

Last name

Use when the form is dense and every field is obvious. Not for long or unusual labels.

Inline labellabel column · 110 px

Company

VAT ID

Country code + number

Prefix & suffixaddons are not part of the value

Workspace URL

https://.avava.studio

Lowercase letters, numbers and dasheshttps://yourstudio.avava.studio

Day rate

$USD / day

Separators are added as you type

With actionbutton inside the field

Invite link

Promo code

Textareaauto-grow · 280 limit

Project brief

Grows with the text, up to 9 lines

0 / 280

Input masksformat as you type · raw value kept

Phone

raw: —

Card number

Try 4242 4242 4242 4242raw: —

Expiry

raw: —

IBAN

Try DE89 3704 0044 0532 0130 00raw: —

TagsEnter · comma · paste a list

Invite teammates3 / 8

1 address looks wrong — click it to edit

One-time codeauto-advance · paste fills all

Sent to o•••@avava.studio · resend in 0:24

States

7 states × 3 sizes

DEFAULTFOCUSFILLEDERRORSUCCESSDISABLEDREAD-ONLYS · 36

M · 44

L · 52

Default1.5 px border at 16% ink, 3% fill

FocusCyan border plus a 4 px ring at 22%

ErrorCoral border, icon and a message that says how to fix it

SuccessGreen — only after a real check, not on every keystroke

Disabled55% opacity, not focusable, value not submitted

Read-onlyDashed border, focusable and selectable, value submitted

Behavior

Validation timing, strength, async checks, suggestions

Validation timingwhen should an error appear?

SHOW ERRORS

Work email

Type “olivia@avava”, then leave the field

Recommended. Errors wait until you leave the field, then update live while you fix them.

Password strengthmeter + live rules

New password

Start typingEstimated crack time

8+ charactersUpper & lowerA numberA symbol

Async checkdebounce 450 ms → request → result

Username

Letters, numbers, dot, dash, underscore

1 · typing2 · debounce3 · request4 · result

Taken in this demo: olivia, admin, avava, studio, jon.

Search suggestionscombobox · ↑ ↓ Enter Esc

Jump to project

Focus the field to open the list

In Avava

Profile settings and a live client filter

ProfileSettings → Account · dirty tracking

Olivia Laneolivia@avava.studio

Full name

Phone

Website

https://

Role

Bio

Shown on proposals and your public profile71 / 160

Clientslive filter · highlight · empty state

8 of 8

CLIENTCONTACTCITYSTATUS

Atelier NoirLeo ParkParisActive

Lume GoodsBen CostaAustinActive

Nova AthleticsAna PetitLondonPaused

Kiln & CoJakob MoreauLagosActive

Orbit LabsIda SvenssonSingaporeLead

Sable StudioJonas BergOsloActive

Forma TypeZoe DahlMilanLead

Halo HealthLiam NovakBostonPaused

Rules & a11y

Anatomy, screen readers, keyboards, labels

Anatomylabel · field · message · counter

Work email*1

olivia@avava

Add a domain, like .studio312 / 404

1Label — always visible, 12.5 / 700, * for required

2Field — 44 px, 1.5 px border, 14 px radius, ring on focus

3Message — hint or error in the same slot — they replace, never stack

4Counter — only when there is a real limit

Screen readerswhat assistive tech hears

✓<label for="email">Every field has a visible label tied by for / id

✓aria-describedby="email-hint email-error"Hint and error are read after the label

✓aria-invalid="true"Set only after validation fails, never on load

✓aria-required="true"Plus a visible * — colour alone is not enough

✓role="alert"New errors are announced without moving focus

✓:focus-visibleRing stays at 3:1 contrast against the card

Right keyboardtype · inputmode · autocomplete

FIELDTYPEINPUTMODEAUTOCOMPLETE

Emailemailemailemail

Phonetelteltel

Amounttextdecimaloff

Cardtextnumericcc-number

OTPtextnumericone-time-code

Searchsearchsearchoff

New passwordpassword—new-password

Placeholder ≠ labelthe hint vanishes on the first keystroke

✕ PLACEHOLDER ONLY

olivia@av

Halfway through typing — what was this field again?

✓ LABEL + EXAMPLEWork email

olivia@av

The label stays. The placeholder only shows the format.

DO✓Keep a visible label above every field✓Validate on blur, then re-check live while the user fixes it✓Say how to fix it: “Add a domain, like .studio”✓Match the keyboard with type, inputmode and autocomplete✓Keep the raw value separate from the mask

DON’T✕Use placeholder text as the only label✕Show an error before the user has finished typing✕Block paste in password or code fields✕Disable Submit without saying what’s missing✕Clear the field when validation fails