# Inputs

> Text fields, search bars and specialised inputs.

- [Swatch Fan](https://www.assembli.design/components/swatch-fan.md): A fan deck of colour swatches pinned at one corner. Hover to riffle, click to pull one out, arrow keys to walk the deck, copy the hex.
- [Shortcut Recorder](https://www.assembli.design/components/shortcut-recorder.md): Click, press a key combination, and it is captured as physical keycaps that press down. Detects conflicts and supports clearing and reset.
- [Contrast Lab](https://www.assembli.design/components/contrast-lab.md): Pick two colours and read the WCAG contrast ratio on a live specimen, with AA and AAA verdicts and a one-click nudge that fixes failing pairs.
- [Allocation Bar](https://www.assembli.design/components/allocation-bar.md): Split a total across categories on one bar. Drag the seams or use arrow keys, lock a category, and every amount updates live.
- [Safe Dial](https://www.assembli.design/components/safe-dial.md): A brushed-steel combination dial you spin with a finger or the arrow keys. It reads the way a real safe does: turn right to a number, reverse, turn left to the next, then pull the handle. Reversals register each step, wrong numbers rattle and reset, and the right sequence unlocks a reward. Haptic ticks on touch.
- [Signature Pad](https://www.assembli.design/components/signature-pad.md): A signature field that feels like ink: strokes thin out as you move faster and thicken with pen pressure, curves are smoothed through midpoints, and a ghost signature draws itself as a hint. Undo, clear, pick an ink, or switch to Type for a keyboard-friendly script signature. Exports a transparent PNG.
- [NPS Scale](https://www.assembli.design/components/nps-scale.md): Net-promoter survey with dock-style magnification across a 0-10 scale that warms from red to green. The follow-up question adapts to detractor, passive or promoter, then folds into a thank-you.
- [Color Picker](https://www.assembli.design/components/color-picker.md): Compact colour picker: a saturation/brightness field, hue slider, hex input and swatches. Pointer-drag and keyboard friendly, copies the hex, works controlled or uncontrolled.
- [Easing Curve Editor](https://www.assembli.design/components/easing-curve-editor.md): Drag the two control points of a cubic-bezier and watch the real animation play against a linear reference. Overshoot is supported, presets spring between curves, handles are keyboard-operable, and the result copies as CSS, Tailwind or Motion.
- [Emoji Slider](https://www.assembli.design/components/emoji-slider.md): A mood slider with a face that actually reacts: the mouth bends from frown to grin, the brows lift, and the whole card drifts from red to green as you drag. Native range input underneath for free accessibility.
- [Gradient Builder](https://www.assembli.design/components/gradient-builder.md): A visual CSS gradient editor: drag colour stops along a strip, click to add one with an interpolated colour, spin the angle dial, switch between linear, radial and conic, shuffle harmonious OKLCH palettes, and copy the CSS.
- [Mention Input](https://www.assembli.design/components/mention-input.md): Textarea where typing @ opens a filterable people list. Pick with arrows and Enter and the mention becomes a styled inline chip.
- [Multi Select Combobox](https://www.assembli.design/components/multi-combobox.md): Searchable multi-select: chips animate in and out, Backspace removes the last chip, and arrow keys move through filtered options.
- [Plucked Strings](https://www.assembli.design/components/plucked-strings.md): Stretched SVG strings you pluck with the pointer: a damped spring simulation sends travelling waves along each string, and WebAudio plays a pentatonic note per string.
- [Rotary Knob](https://www.assembli.design/components/rotary-knob.md): A hardware-style control knob with a brushed-metal body, a ring of ticks that light up with the value, fine-adjust on Shift, keyboard steps, double-click reset and a spring-damped indicator.
- [Ruler Slider](https://www.assembli.design/components/ruler-slider.md): Horizontal ruler you drag to dial in a value: ticks scroll under a fixed needle with momentum and snap, major ticks labelled.
- [Star Rating](https://www.assembli.design/components/star-rating.md): Accessible rating input with half-star precision: hover previews the value, stars pop in a wave when you commit, and arrow keys step by half a star. Also renders read-only for averages.
- [Wheel Picker](https://www.assembli.design/components/wheel-picker.md): An iOS-style 3D drum picker built on native scroll-snap: items curve away on a cylinder as you scroll, with mouse drag, wheel, touch, click-to-select and arrow-key support. Compose several for time and date pickers.
- [Elastic Slider](https://www.assembli.design/components/elastic-slider.md): iOS-style slider you can grab anywhere: dragging past either end stretches and thins the track like rubber and pushes the end icon, then springs back. Full slider keyboard support.
- [Histogram Range Slider](https://www.assembli.design/components/histogram-range-slider.md): Dual-thumb price-style range slider over a distribution histogram: bars inside the selection light up, a live result count updates as you drag, thumbs swell on grab, and every key (arrows, PageUp/Down, Home/End) works.
- [Number Stepper](https://www.assembli.design/components/number-stepper.md): Quantity stepper whose digits roll like an odometer in the direction of change; only changed digits move. Holding a button repeats and accelerates; hitting a limit shakes.
- [OTP Input](https://www.assembli.design/components/otp-input.md): One-time-code field with grouped cells, paste and arrow-key support, autofill hints, an async check that pulses while verifying, a shake on failure and a cascading green on success.
- [Password Meter](https://www.assembli.design/components/password-meter.md): Password field with reveal toggle, a four-segment strength meter that fills and recolors as you type, and a requirement checklist that ticks itself off. Custom rules supported.
- [Tag Input](https://www.assembli.design/components/tag-input.md): Tokenizing input with autocomplete: Enter, comma or a pasted list adds tags, Backspace removes the last, chips pop in with stable per-word tints, and a counter enforces the limit.
- [File Dropzone](https://www.assembli.design/components/file-dropzone.md): Drag-and-drop or click-to-browse upload zone that validates type, size and count up front, previews images, and shows per-file progress, success and errors from your onUpload(file, onProgress) handler. Keyboard-operable, with announced rejections.
- [Search Field](https://www.assembli.design/components/search-field.md): Search input with a ⌘K focus shortcut, loading spinner, clear button and Escape-to-clear; works controlled or uncontrolled.

Back to [all components](https://www.assembli.design/components.md).