Tactile Controls

Controls with weight, travel and detents.

Physical controls communicate through resistance and feedback. These components borrow that language — elastic limits, detents, sustained presses and confirmations — while remaining proper sliders, switches and buttons to assistive technology.

A.35
dragpointerspringmotion
Rotary Knob
A tactile synth-style dial: drag, turn, scroll or use the keyboard, with ticks, a value arc and optional detents.
Buttons & Controls · React / Motion / SVG / Tailwind
A.34
dragpointerspringmotion
Elastic Slider
A range slider whose track rubber-bands past either end and springs back on release.
Buttons & Controls · React / Motion / Tailwind
A.03
presskeyboardtweenmotion
Hold to Confirm
A destructive-action button that fires only after a sustained press, with a rewinding progress ring.
Buttons & Controls · React / Motion / SVG / Tailwind
A.36
clickhovertweenmotion
Copy Button
A copy-to-clipboard button whose icon morphs into a drawn check, with a tooltip, live announcement and fallback.
Buttons & Controls · React / Motion / SVG / Tailwind
A.01
pointerhoverspringmotion
Magnetic Button
A button gently pulled toward the pointer inside a bounded magnetic field.
Buttons & Controls · React / Motion / Tailwind
A.02
hoverpointertweenmotion
Liquid Button
A button flooded with colour from the exact point the pointer enters, draining out where it leaves.
Buttons & Controls · 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
A.65
pressclickspringmotion
Number Stepper
A numeric field with − / + buttons, accelerating hold-to-repeat, rolling digits and an elastic bump at the limits.
Buttons & Controls · React / Motion / Tailwind
A.66
dragpointerspringmotion
Swipe to Confirm
A slide-to-unlock control: drag the knob across the track to confirm, or step it there with the arrow keys.
Buttons & Controls · React / Motion / CSS / 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
A.96
dragpointerspringmotion
XY Pad
A 2D control surface: drag a puck to set two values at once, with grid, crosshair, readout and keyboard nudging.
Buttons & Controls · React / Motion / SVG / Tailwind
A.93
clickkeyboardlayoutmotion
Segmented Control
A radio-group segmented control with a spring thumb, roving arrow keys, sizes and native form support.
Buttons & Controls · React / Motion / Tailwind
A.124
pressclickspringmotion
Keycap Button
A mechanical keycap with a real skirt and dished top that travels down on a short spring, bottoms out and clacks.
Buttons & Controls · React / Motion / CSS / Tailwind
A.125
clickkeyboardspringmotion
Vote Control
Forum-style up / down voting with rolling digits, bouncing arrows and optimistic updates that roll back on error.
Buttons & Controls · React / Motion / SVG / Tailwind
A.123
clickpressspringmotion
Progress Button
A download button whose fill sweeps across as work progresses, with pause, cancel, retry and a rolling percentage.
Buttons & Controls · React / Motion / SVG / Tailwind
A.155
keyboardfocustweenmotion
Kbd Shortcut
Keycaps for a keyboard shortcut that light up as the keys are physically pressed, with platform-aware modifiers and sequences.
Buttons & Controls · React / Motion / Tailwind
A.153
clickkeyboardspringmotion
Split Button
A primary action joined to a chevron menu of alternatives, with descriptions, typeahead and an optional remember-last-action mode.
Buttons & Controls · React / Motion / 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
A.184
clickkeyboardspringmotion
Scene Switch
An illustrated day / night switch: the sun springs across a tiny sky and turns into the moon.
Buttons & Controls · React / Motion / SVG / CSS / Tailwind
A.185
clickpressspringmotion
Record Button
A voice-note record button: the circle morphs into a stop square, a ring pulses with the level, then play back or discard.
Buttons & Controls · React / Motion / SVG / Tailwind

Technology requirements

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

ReactMotionSVGTailwindCSS

npm dependencies: motion
Peer: react, tailwindcss

npm install motion

Next collectionWayfinding