Form Craft

Forms people don't dread.

Forms are where interfaces ask for something, so they owe people clarity. Every input here has a real label, announces errors where screen readers will hear them, works from the keyboard first, and uses motion only to confirm that something happened.

F.22
focuskeyboardtweenmotion
Floating Label Input
A premium text field whose label floats on focus, with hint, validation and autofill support.
Forms & Inputs · React / Motion / CSS / Tailwind
F.24
keyboardfocusspringmotion
Animated OTP Input
One-time-code entry with paste, SMS autofill, keyboard navigation and an error shake.
Forms & Inputs · React / Motion / Tailwind
F.23
clickkeyboardtweenmotion
Multi-Step Form
A typed, multi-stage form with per-step validation, direction-aware transitions and a success state.
Forms & Inputs · React / Motion / Tailwind
F.52
keyboardfocusspringmotion
Tag Input
A chips input with paste splitting, duplicate shake, keyboard chip navigation and accessible suggestions.
Forms & Inputs · React / Motion / Tailwind
F.53
keyboardfocusspringmotion
Password Strength
A password field with show/hide, a four-segment strength meter and a live requirement checklist.
Forms & Inputs · React / Motion / Tailwind
F.54
dragclickspringmotion
File Dropzone
Drag-and-drop or browse for files, with per-file validation, thumbnails, upload progress and retries.
Forms & Inputs · React / Motion / SVG / Tailwind
F.55
hoverclickspringmotion
Rating Input
An accessible star rating built on native radios, with hover preview, half steps and a particle pop.
Forms & Inputs · React / Motion / Tailwind
F.21
clickpressspringmotion
Animated Toggle
A tactile switch whose thumb springs across the track and squashes when pressed.
Forms & Inputs · React / Motion / SVG / Tailwind
F.83
dragpointertweenzero deps
Dual Range Slider
A two-thumb range slider with an optional histogram, value bubbles, a minimum gap and full keyboard support.
Forms & Inputs · React / Tailwind
F.84
dragpointerzero deps
Color Picker
An accessible colour picker: 2D saturation area, hue and alpha sliders, validated hex / RGB / HSL input, swatches and eyedropper.
Forms & Inputs · React / CSS / Tailwind
F.85
clickkeyboardspringmotion
Date Picker
A calendar date picker with an ARIA grid, sliding months, single or range selection and a typed ISO field with a native popover.
Forms & Inputs · React / Motion / Tailwind
F.86
dragpointerzero deps
Signature Pad
Canvas signature capture with smooth, velocity-weighted strokes, pen pressure, undo, PNG / SVG export and a typed-name fallback.
Forms & Inputs · React / Canvas / Tailwind
F.113
keyboardfocusspringmotion
Combobox
An ARIA 1.2 autocomplete with match highlighting, groups, async search, multi-select chips and create-on-type.
Forms & Inputs · React / Motion / Tailwind
F.114
clickpressspringmotion
Animated Checkbox
A real checkbox with a drawn check, an indeterminate dash morph, a spring press and a tri-state select-all group.
Forms & Inputs · React / Motion / SVG / Tailwind
F.115
scrolldragscroll-linkedzero deps
Wheel Picker
An iOS-style drum picker: native scroll-snap momentum, a 3D cylinder per column, keyboard and typeahead.
Forms & Inputs · React / CSS / Tailwind
F.116
clickkeyboardtweenzero deps
Inline Edit
Click-to-edit text that becomes a field without moving a pixel, with async save, revert-on-error and validation.
Forms & Inputs · React / CSS / Tailwind
F.143
keyboardfocusspringmotion
Card Input
Payment card fields with brand detection, live formatting, Luhn checks and a card preview that flips for the CVC.
Forms & Inputs · React / Motion / Tailwind
F.144
dragpointerzero deps
Image Cropper
Crop an image with a draggable, resizable box or a fixed frame — aspect presets, zoom, rotate and canvas output.
Forms & Inputs · React / Canvas / Tailwind
F.145
hoverclickspringmotion
Feedback Scale
A five-step satisfaction scale with drawn faces that morph as you hover, a follow-up comment and a thank-you state.
Forms & Inputs · React / Motion / SVG / Tailwind
F.146
keyboardfocusspringmotion
Mention Input
A textarea with @mention and #tag autocomplete at the caret, highlighted tokens and whole-token delete.
Forms & Inputs · React / Motion / Tailwind
F.173
clickkeyboardspringmotion
Variant Picker
Colour swatches and size buttons as radiogroups that derive availability, stock and price deltas from your variants.
Forms & Inputs · React / Motion / Tailwind
F.174
clickkeyboardspringmotion
Chip Select
Filter and interest chips with a springy check-in, select all / clear, a max with feedback and a +N more collapse.
Forms & Inputs · React / Motion / Tailwind
F.175
keyboardfocustweenmotion
Slug Input
A URL slug field that follows the title until edited, previews the full URL and checks availability as you type.
Forms & Inputs · React / Motion / Tailwind
F.176
keyboardclickspringmotion
Markdown Editor
A textarea Markdown editor with a roving-focus toolbar, undoable formatting, shortcuts and a safe Write / Preview.
Forms & Inputs · React / Motion / Tailwind
F.203
keyboardfocuszero deps
Phone Input
An international phone field with a searchable country list, as-you-type formatting and paste-to-detect E.164 numbers.
Forms & Inputs · React / Tailwind
F.204
dragclicktweenzero deps
Clock Picker
An analog time picker: drag the hand round an hour ring, then a minute ring, with snapping, AM / PM and an editable readout.
Forms & Inputs · React / Tailwind / CSS
F.205
clickkeyboardzero deps
Permission Matrix
A roles × permissions grid with tri-state select-all headers, collapsible groups, locked cells and tracked changes.
Forms & Inputs · React / Tailwind
F.206
dragclickzero deps
Availability Grid
A weekly availability picker: drag to paint or erase time slots, merged ranges, per-day summaries and spreadsheet keys.
Forms & Inputs · React / Tailwind
A.183
clickpressspringmotion
PIN Pad
A tactile numeric keypad for PIN entry with spring-filled dots, error shake and keyboard support.
Buttons & Controls · React / Motion / SVG / Tailwind

Technology requirements

Everything this set needs, combined. Each component remains a separate, self-contained file.

ReactMotionCSSTailwindSVGCanvas

npm dependencies: motion
Peer: react, tailwindcss

npm install motion

Next collectionTactile Controls