Design System /Components /Form fields

Form fields

Signup, settings, payments — forms are where trust is earned the slowest and lost the fastest. Every field is labelled, every error is concrete, every placeholder tells you what, not how.

Sandbox

Live preview

Interactive form components served from the working prototype. Tab through, trigger errors, try the toggles — this is the real thing, not a screenshot.

Live Preview Flip Props
Account

Where should we reach you?

Email
That doesn't look like a valid email.
Height
48 default · 40 compact
Radius
--radius-lg · 12px
Focus ring
3px · rgba(0,0,0,0.08)
Error
#C53535 · 18% ring
Text

Input

We'll use this only to sign you in. Never for marketing.
That doesn't look like a 10-digit US number.
Assigned at signup — you can't change this.
Dev

Anatomy

Height48 (default) · 40 (compact)
Radius--radius-md 10px
Border1px --border-strong (always visible — no floating labels)
FocusBorder → ink, 3px rgba(0,0,0,0.08) ring
ErrorBorder → #C53535, matching tinted ring on focus
LabelAbove input. Always present. Never placeholder-only.
Documentation

Form Fields

Cloaked uses two input-field patterns across its products. The Floating Input Field is used on mobile for space efficiency and clean ergonomics. The Conventional Input Field is used on dashboard / web for density, scannability, and form clarity. Both share the same interaction states — the only thing that changes is how the label sits relative to the value.

Overview

Floating Input Field Mobile
9:41 ● ● ● ● ●●● 5G ▮

Create account

Use your selection option to create an account. It will also be your username to log in.

Feature you
Email⌄
Email address
john@doe.com
+1 Phone number
Password
At least 8 characters required◐
Username
johnque✓
We'll never share or sell your info
Conventional Input Field Dashboard

Create your account

Enter your credentials to get started.

First name
John
Last name
Appleseed
Response type
Email⌄
Email Address
john@doe.com
Phone Number
+1 +1 (555) 000-0000
Password
••••••••◐
Referral Code
Optional
Your information is always secure ⓘ

When to Use Which

Context Floating · Mobile Conventional · Dashboard
Screen type Onboarding, sign up, sign in, checkout flows Settings, data tables, filter panels, admin forms
Field count 1–5 fields per screen, single focus at a time 6+ fields, dense multi-column layouts
User type First-time users, onboarding, general consumers Power users, admins, repeat task performers
Space Vertical space is limited on small screens Horizontal space is available, density is a priority
Input types Text-only forms work best with floating labels Mixed types (dropdowns, date pickers, toggles) always use conventional
Interaction Touch — large tap targets, one field at a time Mouse + keyboard — tab navigation, quick scanning

Input States

Both patterns share the same interaction states. Visual treatment is filtered by platform but semantic meaning is identical.

  • Default
  • Focused
  • Filled
  • Error
  • Success
  • Disabled

Each state adjusts border color, elevation, and text opacity according to the semantic UI tokens.

Variants & Properties (Figma)

Each Form Field instance in Figma exposes the following properties. These are wired identically to the React component's prop interface so what you see in the design file is what you get in code.

  • floatingInput — true / false
  • state — default / focused / filled / error / success / disabled
  • showLabel — true / false
  • label — editable text
  • showCountry — true / false
  • showLeadingIcon — true / false
  • text — editable text
  • showTrailingIcon — true / false
  • showHelpText — true / false
  • iconButton — true / false (Marketing only)

These properties enable scalability across thousands of instances.