Forms & inputs

Northwind Pro · Annual

$96.00

Card details

Your card is encrypted end to end.

Renews Nov 7, 2027Pay $96.00

Card Number Field

A single-line card field that detects the brand, checks the number with Luhn and then folds it down to the last four digits while expiry and security code slide in. The tiny card glyph flips to its back when the security code has focus.

↗

Turn on two-step sign in

A code arrives each time you sign in.

Phone number

We'll text a code to confirm it.8/10

Phone Field with Country

A phone input with a searchable country picker and a per-country mask whose remaining digits show as faint ghost characters. Pasting a number that starts with a dial code switches the country on its own.

↗

In 7 days

November 2026

Date Picker

A date field that understands plain words like tomorrow, next fri, Dec 3 or +10d and previews the parsed date as you type, with a calendar that slides between months. The grid supports arrows, Page Up and Down, Home and End.

↗

4 nightsNov 13 – Nov 17

November 2026

Date Range Picker

A range picker where you drag across days or click a start and an end, with a live preview band that wraps across weeks and a preset column. A running total of days or nights sits above the Apply button.

↗

From SFO · Fri, Dec 12 · 1 adult

Searching…

Async Combobox

A searchable combobox that debounces input, shows shimmering skeleton rows while results load and drops stale responses. Matches are underlined, rows stagger in and the footer reports the result count and how long the search took.

↗

Replying to @mayachen

22 words · 1 min read · ⌘ ↵ to send11 characters left

Autosize Textarea

A textarea that grows smoothly with its content up to a row limit, with a ring counter that turns amber near the limit and red past it. Characters over the limit are tinted in place, and Cmd or Ctrl plus Enter sends.

↗

Drop files here or browse

PDF, ZIP or images up to 50 MB

Q3-board-deck.pdf4.2 MB · Uploaded
product-shots.zip7.1 MB of 18.6 MB · 38%

File Drop Upload

An upload zone in three variants, panel, strip and round avatar, with a marching dashed border on drag and a lifting icon. Each file gets a typed document glyph, a progress ring and a bottom progress line, and rejected files shake with the reason.

↗

4.56:1AA

#7c5cff

Color Picker

A color picker with a saturation and brightness pad, hue and opacity sliders, a HEX, RGB and HSL field and swatches. It shows the original next to the new color and grades contrast against your background with WCAG AA and AAA.

↗

Pickup at Ember & Olive

Drag to set the hour

06:30 PM

Clock Time Picker

A time picker with an analog dial: drag the hand to the hour and it moves on to minutes, which snap to a step. A large readout, an AM and PM switch and full keyboard control sit beside it.

↗

LM

Lena Moreau

lena@moreau.studio

You sendAvailable $2,400.00

≈ €1,148.62

Currency Field

A money input where digits fill from the right like a register, each new digit rolling in, formatted live for the locale and currency. It shows a converted estimate, quick add chips and a balance limit that shakes when crossed.

↗

Assigneematching

Prefix with - to exclude, like -status:closed

Search with Filters

A search field that turns key:value syntax into colored filter tokens, suggesting filter names and then their values as you type. Prefix with a minus to exclude, click a token to edit it, and press Backspace twice to remove the last one.

↗

Sign the lease, unit 4B

Signature Pad

A signature pad whose line thins with speed and thickens when you slow down, drawn as smooth curves at full screen resolution. It has ink colors, undo, a typed alternative and a signed stamp with the time.

↗

Talk to our team

Pick a topic and we will route you to the right person.

Contact Form

A routed contact form where the topic switch reshapes the fields and the reply time. Inline validation, a message progress ring and a paper plane success state with a ticket number.

↗

Lumen

Create your account

Free for 14 days. No credit card required.

Signup Form

Account creation with a live username availability check, email typo suggestions and four password checks that fill as bars. Ends on an animated envelope with a resend countdown.

↗

Wizard Form

A four step onboarding wizard with a segmented progress rail, direction aware slides and a review step with edit links. Creating the workspace plays a short setup checklist.

↗

Quick survey · 1 of 4

1

How likely are you to recommend Fieldnote to a colleague?

Not likelyExtremely likely

press 0 to 9

Survey Form

One question at a time with an NPS scale, lettered choices and keyboard shortcuts. Picks confirm with a quick blink and advance on their own, ending on a summary with the score group.

↗

From: Haven Goods · Portland, ORGround

Jordan Alvarez2150 Market StreetSan Francisco, CA 94114

US

Address Form

A shipping address form that adapts labels, postal masks and line order to the country. A parcel label above it prints the address as you type and stamps it once saved.

↗

Settings Form

Account settings that track every edit: changed fields get a dot and a floating bar counts unsaved changes with Reset and Save. Supports Cmd+S and confirms with a green saved state.

↗

Feedback Widget

A launcher pill that opens a feedback panel with a face whose mouth and brows morph across a five step mood scale. Category, note and page URL go out in one tap.

↗

Issue 118

The Interface, a Thursday letter on product craft.

Join 12,400 designers

Inline Subscribe

A one line newsletter field where the button sweeps across the input while it subscribes, then turns into a confirmation with a shortcut to the right inbox. Invalid emails shake and raise a tooltip.

↗

Lena OrtizIntro call · Google Meet

November 2026Pacific Time

Booking Form

Pick a day from a strip with availability marks, choose a free slot, then add your details. Confirms with a perforated ticket and an Add to calendar file.

↗

Join the beta · estimated spot#6,086of 6,240

General

Waitlist Form

A waitlist form with a live priority meter: every optional answer moves your estimated spot forward and up through access tiers. Joining reveals a referral link with copy feedback.

↗

Sign inUse your Northwind account

Compact Login

Email first sign in that slides to a password step with the account chip, a caps lock badge and attempt pips. Too many misses lock the form with a countdown.

↗

Jonah Park@jonahpark · Seoul, KR

83%

Add a short bio to reach 100%

NameJonah Park
Username@jonahpark
BioAdd a short bio
LocationSeoul, KR
Websitejonah.design

Profile Edit

A profile you edit in place, one row at a time, with Enter to save and Escape to cancel. A completion ring and hint track what is missing, and the avatar opens a color picker.

↗

Card Number Field

Phone Field with Country

Date Picker

Date Range Picker

Async Combobox

Autosize Textarea

File Drop Upload

Color Picker

Clock Time Picker

Currency Field

Search with Filters

Signature Pad

Talk to our team

Contact Form

Create your account

Signup Form

Name your workspace

Wizard Form

How likely are you to recommend Fieldnote to a colleague?

Survey Form

Address Form

Account settings

Settings Form

Feedback Widget

Inline Subscribe

Booking Form

Waitlist Form

Sign inUse your Northwind account

Compact Login

Profile Edit

Forms & inputs

Card Number Field

Phone Field with Country

Date Picker

Date Range Picker

Async Combobox

Autosize Textarea

File Drop Upload

Color Picker

Clock Time Picker

Currency Field

Search with Filters

Signature Pad

Talk to our team

Contact Form

Create your account

Signup Form

Name your workspace

Wizard Form

How likely are you to recommend Fieldnote to a colleague?

Survey Form

Address Form

Account settings

Settings Form

Feedback Widget

Inline Subscribe

Booking Form

Waitlist Form

Sign inUse your Northwind account

Compact Login

Profile Edit