React Form Input Components

An input with a spring-physics smooth caret — the custom caret glides to the text position on a spring, in bar, block, or underline shapes.

A segmented verification-code input — a single invisible input sits over the visual cells, with paste support, an error shake, and a success ripple that turns the cells green.

A tag input — Enter or comma adds a pill chip (trimmed and deduplicated), Backspace on an empty input deletes the last one; chips spring in, and the rest close ranks with FLIP on removal, with no accidental adds mid-IME-composition.

An input that dissolves its text into pixel particles on submit, in sweep, scatter, or rise styles, with rotating placeholders.

A drag-and-drop upload area — the magnetic dashed border leans toward the cursor and marches like a marquee, and the file list carries ring progress indicators.

A multi-step form container with direction-aware sliding transitions and a switchable progress indicator style.

A click-to-edit inline field — the display and edit states swap seamlessly with a layout morph, Enter/blur submits and Esc cancels, with multiline support, controlled and uncontrolled modes, and no accidental submit mid-IME-composition.

A slider whose thumb stretches with spring physics — drag past the boundary and the track extends like a rubber band, then springs back.

A password input with a live strength meter, a rule checklist, and a reveal toggle.

Two handles select a numeric range, with live value bubbles — ideal for price filters.

A textarea where typing @ opens a people menu and inserts a highlighted mention chip.

Handwritten signatures on canvas: pressure-sensitive stroke width, clear and redraw, export to PNG.

A photoreal credit card that updates live as you type, flipping over when the CVC field takes focus.

Drag the slider and the face morphs from crying to hearts, deforming with the value.

An iOS-style 3D wheel for picking a time: momentum scrolling, snapping, and a perspective arc.

A 3×3 connect-the-dots unlock: drag to draw the pattern, with success/failure feedback animations.

A classic star rating React component: half stars, hover-preview fill, arrow and number key control, a bounce on select, and a read-only mode that shows the average, review count and a distribution chart; icon, colour and star count are all customisable.

A React ± quantity stepper for ecommerce: press-and-hold acceleration, min/max with an at-limit shake, direct typing, a trash icon at zero, and rolling digits, in compact and pill variants.

An NPS survey card for React: 0-10 segmented buttons coloured by detractor/passive/promoter band, a follow-up question that expands after scoring, a thank-you state, plus npsCategory and npsScore helpers.

A button-triggered select whose value crossfades on change, with an anchored list that flips at edges, groups and separators, typeahead and arrow-key navigation, and a sliding highlight.

A React checkbox whose check mark draws itself with a small squash-and-settle, morphing smoothly between the indeterminate dash and the check, with staggered select-all in groups.

A React radio group: the selected dot springs into place, and in the card variant the selection outline slides between options, including on arrow-key changes. Supports controlled/uncontrolled use, vertical or horizontal layout, and form submission.

A form field wrapper React component that ties together label, hint, error and prefix/suffix addons; errors expand and collapse by height without layout jumps, addons share the input's focus ring, and a render prop wraps any control.

A type-to-filter picker that never filters or selects mid-composition for CJK input, with an anchored list that flips at edges, a sliding highlight, and removable chips in multi-select mode.

A rotary knob input: an SVG tick ring, a subtle nudge at detents, a spring-settled pointer and a rolling readout, with wheel and arrow-key support.

A React switch and slider that share one thumb: turning it on makes the thumb leap onto a vertical or horizontal slider to set a value, turning it off sends it back. Built for enable-then-adjust settings.