React form and input components
Text fields, selects, switches, steppers, date pickers, file drops and the other controls a form is built from. Reach for these when a page needs to collect or edit structured input, not just display it.
92 components
Decatron Step Ring
Circular step/cyclic-position indicator modelled on a decatron cold-cathode counting tube: a glow spot steps around ten radial stations, stretching onto an interleaved guide electrode before snapping fully onto the next cathode, free-running as an unbounded decade counter.
Float Ribbon Draw
A multi-stage pipeline/job-status bar modeled on the float-glass process: a fixed molten-to-set thermal gradient marks the pipeline's stages while a faint ripple scrolls continuously through the still-molten zone at a constant draw speed, so the bar keeps reading as 'actively running' whether or not a specific stage is highlighted.
Roller Break Reduce
An ambient multi-stage pipeline indicator built as a flour mill's break system: a stream of particles shrinks by roughly a third every time it crosses a nip between two differentially-spinning corrugated rollers, three or four stages left to right.
Spark Test ID
A file dropzone that identifies a specimen the way a machinist reads unknown steel: an idle grinding-wheel spark shower runs continuously, and the detected file type sets a characteristic spark signature of burst count, fork depth, and carrier length.
Back Bearing
A sighting-compass bearing picker: the graduated card rotates under a fixed lubber line and the instrument always shows the fore reading plus its reciprocal, the way a surveyor verifies a shot.
Bowditch Close
A geofence/traverse polygon editor built like a real closed survey traverse: the last click never auto-snaps to the first, the gap between them is drawn as the misclosure, and Balance runs the 1807 Bowditch compass rule to redistribute it across every leg in proportion to its length.
Chain Scale
A map zoom control that is the scale bar: drag its end handle in log space to zoom, and the bar's length always reads a sayable 1-2-5 round distance, snapping with a 180ms width spring at every ladder crossing instead of drawing an arbitrary raw number.
Index Contour
A travel-time reach editor: one slider handle sets minutes, and the reach renders as topographic-style contour bands re-thresholded from a real per-node cost field via marching squares, with every third line heavier and labelled inline in a break in its own stroke.
Pecked Ring
A geofence radius editor whose circle is drawn in pecked chart line-work where each dash is exactly 100 metres of ground circumference, so dragging the handle outward visibly grows the dash count and the radius reads by eye with no scale legend.
Pin Register
A map layer panel drawn as registered acetate separations: each layer a translucent sheet in a shallow isometric stack that fans on hover, and turning one off parks it visibly off the pins instead of hiding it.
Fusee Cone
A burn-rate alert policy editor built as a clock fusee: error budget is the mainspring barrel, a chain rides down a tapering cone as budget depletes, and alert sensitivity at any budget level is the cone's local radius, authored by dragging exactly 4 monotone control points, with a real multi-window rule table derived from the shape.
Seep Lattice
A feature-flag rollout picker where blast radius is computed as literal site percolation: user segments are cells in a declared-adjacency lattice, the rollout percentage wets a fixed-order prefix of cells, and union-find continuously finds the largest connected wet cluster. Its traced perimeter and percentage are the honest readout a plain rollout number hides, with a cliff at the lattice's own measured containment threshold rather than a smooth curve.
Growth Ring
Version history as a dendrochronological cross-section: one ring per save, ring width proportional to change size, a dark line wherever authorship changed hands, and restoring an older version previews the discard as outer rings hinging open before you confirm.
Bitting Cut
Every passkey in a sign-in-methods list gets a physical key blade whose six notch depths are cut deterministically from its credential id, so the MacBook passkey and the phone passkey stay visually distinct objects across sessions.
Envelope Window
An OAuth-style consent screen built as a physical envelope: the user's real account data sits on a sheet underneath, and each granted scope die-cuts a window through an opaque envelope layer so what the app can see is literally what shows through.
Idler Drop
Delegated admin drawn as a gear train: your authority is the drive gear, each delegate is a driven gear whose tooth count sets a discrete role ratio, and revoking swings the idler out so their gear freewheels to a stop while yours keeps turning.
Manifold Bleed
A connected app's standing grants drawn as a valve manifold: each scope is a gate valve on a supply line from your account to the app, and revoking it drains the line backward toward you only after the server confirms, leaving a hairline ghost of what was once granted.
Punch Patch
A role x permission matrix rendered as a Jacquard card where authority is asymmetric material: granting punches a clean hole through the card stock, revoking never un-punches. It pastes a visible patch over the hole instead, so a cell that was ever revoked stays permanently distinguishable from one that was never touched.
Rack Seat
Step-up auth drawn as switchgear racking: a sensitive-actions group sits 12px back on a visible rail with its contacts unmade until fresh verification racks it in, then physically withdraws over the elevation window instead of expiring invisibly into a 401.
Turntable Stall
Org/tenant switcher as a locomotive roundhouse turntable: the bridge slews on a real spring, and org-scoped nav stays visibly disconnected through the entire unaligned middle, reconnecting only when the bridge is exactly on the stall angle AND the server has confirmed.
Crossfoot Gap
An editable invoice grid that validates itself the way a bookkeeper crossfoots a ledger: row totals right of a vertical rule, column totals under a horizontal one, and a corner gap whose width (not a warning icon) carries the size of the mismatch.
Mesh Lash
A currency amount field where two meshed gears are the FX quote itself: tooth ratio draws the exchange rate, and mechanical backlash (the dead angle a reversed gear turns through before the other flank engages) is the provider's spread, printed as a currency figure straight off the gear math.
Specie Clip
A partial-refund control drawn as a struck coin with a reeded edge: dragging a chord across the disc clips off a sector whose true circular-segment area, not the chord's linear position, is the refund amount, so the coin visibly diminishes by exactly what it pays out.
Brine Float
A pricing section built as one shallow tank: an SVG water line runs behind the whole tier row and each card is a hydrometer float riding it, heavier (cheaper) tiers sitting lower and the recommended tier riding highest, with the billing toggle changing the brine's density so a price change is felt as buoyancy.
Starch Shear
Film-strip thumbnail scrubber made of a shear-thickening material: drag slowly and each thumbnail visibly lags the one before it down the chain like a liquid; flick fast and the strip instantly locks into one rigid slab that moves and stops as a single piece.
Nomogram Edge
A two-input estimator built as a real paper nomogram: three vertical ASCII scales in Geist Mono where a straightedge stretched between draggable left and right handles crosses the middle scale at the exact computed answer, log-spaced so the crossing is mathematically exact rather than decorative. Scaled and paced as a pricing-page hero: a thick line springs into place on mount and the crossing idles through a few illustrative readings on its own before anyone touches it.
Stencil Fill
A reusable pattern-masked input: the full template renders at rest as a muted stencil with literal separators already in place, each typed character inks its own cell, and a refused character prints faint, shakes, and falls away instead of vanishing silently.
Newsletter Cadence Rail
A newsletter capture whose headline element is a mono day-rail showing the publication's actual rhythm (six weeks of days, an issue mark every interval, a caret on today), so before typing anything you know exactly how often it lands and when the next one is.
Schedule ASCII Free/Busy
A meeting-time finder: one row of block glyphs per attendee and an underlined accent window marking the earliest slot where everyone required is free. Toggling a person optional recomputes the answer instantly.
Contact Form Teletype
A contact form whose validation prints as a teletype receipt below it: each field's check accretes as a new line, and correcting a field strikes through the old line and reprints rather than clearing it.
Toggle Theme ASCII
A light/dark toggle whose chip reads the real resolved --background/--foreground values at mount and on every theme change and paints itself in their negative, so it previews almost exactly what the page will look like the instant you click it.
Heatmap Calendar Tide
Calendar heatmap read as a tide table: one column per week, depth carried by a single-hue ramp mixed from the accent token, with arrow-key navigation.
Switch ASCII Knife
An accessible switch drawn entirely in box-drawing and block characters, in the register of a physical knife switch: the blade fills one cell at a time and the handle glyph spins through the throw.
Radio Ballot Drop
A single-choice input as a paper ballot: the chosen option folds into a slip and drops through the ballot box's slot with two-phase paper physics (flutter, then settle), and switching your vote pulls the old slip back out first.
Signature Consent
Signature capture as consent: a canvas ink strip with pen-pressure feel that retraces itself in a clean witness replay before Confirm embosses it as Authorized.
Card Number Emboss
A card-number input rendered as an embossing machine: typed digits raise as bevel-shadowed metal, a stamping-head caret dips on every keystroke, and a brand watermark fades in once enough digits exist.
Time Picker Sundial
A time-of-day picker as a flat sundial: drag the outer ring to set the hour and the inner ring for 5-minute detents, while a soft blurred gnomon shadow points at the hour and lengthens from a short AM wedge into a long PM one as you keep dragging past noon.
Filter Facet Mesh
Faceted filter chips as a sieve: active facets read as taut, bright threads in a hairline mesh fanned from a hub above the chip row, hovering a chip visibly tightens its own thread, and deselecting one opens a gap that shakes a few result particles through as the count sifts to its new value.
Switch Solder Bead
A boolean switch rendered as two liquid solder beads on a hairline rail, trading mass through a gooey neck that bulges, stretches and pinches off on toggle, with a ratio prop for rendering any partial allocation, not just on/off.
Scrubber Film Strip
Media scrubber rendered as a film strip: sprocket-holed edges, one cell per second, a gate-claw playhead that snaps hole-to-hole on a slow drag and releases into a continuous glide on a fast one, buffered range showing as faintly noise-filled exposed frames.
Heatmap Year Stipple
A GitHub-style year activity calendar where intensity is stipple density, not color: every day cell holds a handful of deterministically jittered ink dots, denser for more activity, like an engraved print. Hovering or arrow-keying through days opens a zoomed loupe with the exact count, and each new day's dots spring into the loupe with a brief ink-settle scatter, like fresh ink landing on paper.
Switch Eclipse
A binary switch drawn as an eclipse: a dark occluding disc slides across a bright sun disc inside a 56x28 track, forming a computed crescent at the midpoint and a thin corona ring once fully on, while the track's ambient tint darkens smoothly with occlusion.
Carousel Card Riffle
A card-stack navigator that shows its actual card edges as a scrubbable stripe of thin lines: dragging it riffles cards past with quick flip-past kicks, and the same stripe doubles as the pagination readout.
Wizard Canal Lock
A wizard stepper built as a flight of canal locks: the next chamber's water level climbs to meet the current one, and only once they equalize does the shared gate split open for the active highlight to glide through. An invalid step's level visibly stalls short of the gate line instead of popping a toast.
Command Palette Rotary
A jump switcher navigated as a 1D rotary space instead of a ranked list: destinations sit at fixed compass bearings on an invisible ring, and you sweep past them; only the reticle item resolves fully while neighbors compress toward the edges of a periscope slit, with a Geist Mono bearing tape scrolling along the top.
Checkbox Domino Run
Select-all where the change propagates like a domino run: flip the master and a wavefront tips down the list, each row's checkbox flipping and shoving the next. Click any row mid-run to halt the wave there, leaving the rest untouched.
Tag Input Pull
A tag/token input whose chips attach like burrs: hooked, not glued. Removing one takes a deliberate pull: it stretches at the trailing edge, pops free, and the row exhales closed behind it with a staggered ripple toward the caret.
Textarea Autosize Swell
An autosize textarea that grows like dough proofing instead of reflowing like a spreadsheet cell: ordinary typing raises it line by line with a soft 180ms swell, a large paste breathes open over 400ms in one continuous motion instead of popping, and deleting text back down is slower still (320ms) so the surface never snaps under the cursor.
Tag Input Tear
Tag input whose chips hang from a perforated edge instead of an x icon: dragging a chip down snaps its dashes into torn stubs top-to-bottom as a 0-1 tear progress crosses each one, and past 80% releasing drops the chip with a 4deg rotate and gravity while siblings close the gap via FLIP; releasing early springs everything back and re-knits the perforation in reverse. Delete/Backspace on a focused chip removes it instantly through a plain 150ms fade, no tear theater, and Ctrl+Z undoes any removal.
Listbox Sticky Groups
A grouped listbox for long lists (timezones, countries, currencies) where every passed group header sticks in place, stacking into overlapping 20px slivers you can still read and click. A live table of contents made from the headers themselves.
Date Range Tape
Date-range calendar where the selection is a tape measure: clicking anchors the hook, moving extends a mono-ticked strip across the grid with a live night count on its free end, and confirming locks it in place or Escape recoils it to zero.
Wizard Dovetail
A multi-step form whose completed steps physically interlock: each step contributes an SVG dovetail chip to a rail, sliding in to mate on a spring when valid, or bouncing off the joint and returning when it isn't.
Validation Error Summary
Failed-submit error handling as a contractor's punch list: a numbered defect summary pins to the top of the form, a hairline SVG leader line links each entry to its field on selection, and fixing a field strikes it through and counts down to self-dismissal.
File Upload Seal
File upload where progress is the container: a loose dashed outline 24px outside the card pulls taut as the file uploads, clicks shut with a pucker at 100%, and relaxes back out with a wobble on failure.
Slider Allocation Wire
Two-way allocation slider built as a slack wire between two labeled anchors: a bead sliding along the wire sets the ratio while the wire's own sag encodes the unallocated remainder, so a taut straight wire means fully committed and a deep droop means budget left on the table.
Slider Chladni Tune
Precision-tuning slider whose readout is a plate of a few thousand sand grains: off target they churn in a formless haze, on target they lock into a crisp symmetric Chladni figure and hold still. Distance-to-correct read as pattern coherence, not a number.
Validation Inline Wick
Inline per-field validation where the bottom border diffuses an error tint in from the exact offending character, like litmus paper: slow and pale while an async check is still pending, fast and decisive once it's definitely wrong, and it wicks back out the moment the field is fixed.
Radio Group Pin
Vertical radio group whose single choice is embodied by exactly one indicator: a dot resting on the checked option's notch that, on re-selection, elongates into a thin traveling line along a hairline rail (ticking each notch it passes) and contracts back down into a dot once it arrives. No spring, no overshoot, and never a line at rest.
Stepper Ratchet
Numeric spinbutton built as a ratchet and pawl: incrementing is free and clicky and a hold repeats and accelerates, but decrementing requires holding ~250ms while the pawl visibly swings 35 degrees clear before a hold starts stepping back, also accelerating.
Queue Triage Ratchet
Card-triage queue driven by a literal one-way ratchet: deciding a card clicks a toothed rail forward one notch; undo means visibly lifting the pawl before the rail eases back.
Refusal Negotiation
A refusal that negotiates instead of stonewalling: the offending span of a blocked request is echoed back struck through, with narrowing-lever toggle chips that rewrite it and unlock resend the instant a recheck passes.
Context Prompt Shims
Prompt composition rendered as machinist shims fitted into a fixed-height gap: each section's row height maps to its real token count, order is drag/keyboard reorderable with FLIP transforms, and an over-budget insert compresses the stack, bounces back to the tray, and surfaces a truncation remedy instead of an error string.
Picker Pareto Frontier
Model picker rendered as a legible cost/latency/quality Pareto scatter: the frontier is a rising line of solid nodes (quality can't rise without moving right into cost), dominated models are hollow nodes below it joined by a connector whose length is the quality you'd forfeit, and a readout names the selection with its three numbers plus the concrete delta once per commit.
Copy Button Travel
Copy-to-clipboard button whose confirmation shows what got copied: a duplicate of the source text visibly peels off the line and travels the real distance to the clipboard glyph before fading, arriving as the glyph gives a small catch-bounce and the label ticks to "Copied".
Transfer List Siphon
Multi-select a source list, drag just one selected item into the destination to prime the siphon, and the rest of the selection flows through a live SVG tube one bead at a time until it drains or you break the seal.
Slug Field Mirror
A primary field with a slugified 'carbon copy' stacked underneath it, offset like a duplicate sheet peeking out from beneath a receipt. Every keystroke stamps its transformed counterpart onto the flimsy with a tiny pressure jitter; editing the flimsy directly tears it off the coupling until a real Relink button re-stamps it.
Consent Scope Redact
A consent surface that shows instead of tells: a live sentence templated from the user's own record, where each sharing scope is a real switch and toggling it sweeps a felt-pen redaction bar over exactly the tokens that scope withholds.
Slider Vernier
Numeric input built as a true vernier caliper: a fixed coarse tick row over a sliding fine row at 0.9x pitch, where the accent-lit fine tick physically lines up with a main tick to spell the last digit. Drag the body for fast absolute moves, drag the vernier scale itself for one-step-per-tick precision.
Optimistic Stitch
Optimistic-write feedback for a single row rendered as a tailor's basting stitch along its left seam: dashed hand-stitch while pending, pulled tight into a solid hairline on ack, or unraveled to muted and dimmed on failure with an inline retry.
Confirm Dial Align
Destructive-action confirm gated on precision, not patience: rotate an SVG dial's notch to within 3deg of a fixed index, hold it there 400ms, and the dial snaps home and arms the confirm button. Overshoot and it springs back like a slipping safe tumbler.
Rating Stamp
Rating / level input rendered as a row of seal impressions: chosen levels stamp solid with a physical thud and an expanding impression ring, the rest wait as faint unfilled outlines, so the value reads unambiguously even in a still frame. A radio-group underneath, not a decoration.
Checkbox Ink Stroke
A checkbox and its tri-state select-all cousin whose mark is inked on by a variable-width calligraphic pen stroke (thin entry, thick corner flick, a hair of overshoot at the tip), so checked, unchecked and indeterminate read as three distinct pen gestures.
Slider Range Shear
Dual-handle range slider whose selected span is a taut band of material: it visibly shears under drag velocity while the far handle stays planted, then snaps flat with a slight overshoot on release.
Tag Input Cord
Tag input as beads threaded onto a cord: committing a tag cinches a bead into place with one overshoot squeeze while its knot draws on; Backspace on an empty input unravels the last bead with a drop-and-twist. Duplicate commits shudder the existing bead instead of re-threading it.
Checkbox Tally Notch
Checkbox group rendered as a carpenter's tally: each check carves a notch stroke into its row and adds a stroke to an aggregate tally cluster in the header, where every fifth stroke slashes diagonally across its group of four. Strokes draw on with a dashoffset sweep and retract on uncheck.
Search Winnow
Search input that winnows its list like grain from chaff: non-matching rows tumble aside with a slight rotation and fade, then their slot collapses so survivors settle together. Clearing the query lets the chaff drift back in. Full combobox keyboard pattern with a live match counter.
Approval Inline Diff
Human-in-the-loop tool-call approval row: every argument is editable inline with an old→new diff, and deciding collapses the row irreversibly into a one-line receipt.
Citation Inline Card
An inline citation pill (hostname + source count, Geist Mono) that opens one bordered card with a title, excerpt and a 1/N stepper, instead of a popover per source.
Voice Recorder Meter
Voice-capture chip whose amplitude strip is real Web Audio, not Math.random() bars: flat at rest, live spectrum while listening, an honest error if the mic is denied.
Timeline Reasoning Rail
Collapsible agent-reasoning timeline: status lives entirely in the node glyph on a 1px vertical rail, steps stream in over time, and completed steps fold to a single line so a long run stays readable.
Tag Input Backspace
Tag input where Backspace on an empty field arms the last tag with a depleting bar instead of deleting it: a second Backspace inside the window removes it.
Select Caustic
Single-select whose frosted-glass trigger and listbox sit over drifting caustic light pools; hovering or arrow-keying an option bends the caustics toward that row so the highlight reads as pressed into the glass.
OTP Reel
6-box code entry where each box is a tiny slot-machine cipher reel: keystrokes spin a canvas glyph strip into a weighted detent on the typed digit with an accent flash; backspace reverse-spins to blank and idle cells carry a faint ambient drift.
Segmented Control Fling
Segmented control with a visibly grabbable pill (grip dots, hover lift): fling it, it coasts on real release velocity, rubber-bands off the ends, and snaps into the nearest detent. Optional one-shot intro fling demos the mechanic on first view.
Slider Loupe
Slider read through a circular magnifying loupe riding the thumb: the tick beneath sits sharp at 1.8x inside the lens while the rest of the scale rests soft-focus; rubber-banding past the bounds wobbles the magnification on release.
Stepper Needle
Bounded numeric stepper with a large mono value readout, prominent -/+ buttons, and a labeled history strip: an inertial needle swings to each committed value while the strip advances, etching the last 20 adjustments with the newest mark highlighted.
Date Picker Moon
Masked date input whose popover calendar doubles as a moon-phase almanac: every day cell carries a canvas moon with a real synodic terminator, the field icon tracks the focused date's phase live, and committing runs an eclipse transit across the chosen numeral.
Password Strength Tide
Password field with a canvas water tank behind the masked text: entropy raises the tide on a damped spring, keystrokes slosh a real 1D heightfield wave, deletions pull the level back down.
File Upload Thermal
File dropzone as a thermal field: dragging spawns rising accent convection wisps, accepted drops buoy off the drop point and squash-land into a docked queue rack, rejected files sink and fade.
Switch Frost
iOS-style switch whose OFF state freezes over: seeded dendritic frost feathers creep in from the track edges over a frosted-glass film, with sparkle grain that glistens at idle; switching ON drives a melt front ahead of the sliding thumb with droplet run-off.
Dial Moire
Weighted rotary knob tuned like a radio: counter-rotating line gratings shimmer with moire interference, and a hidden word only resolves at the detent.
Input Focus Membrane
Text input whose focus ring is a living membrane: a noise-displaced canvas loop that breathes on idle, dilates on focus, sends a peristaltic pulse from the caret on each keystroke, constricts and quivers on error, and exhales once on valid submit.