Input & Control Components

Controls are the highest-touch surface of any product: pricing pages, settings, checkouts. A slider whose total counts up as you scrub, or a billing toggle that snaps with a little elasticity, does more for perceived quality per byte than anything else on the page.

19 UI elements, 2 free, no build step

£99£79.20

Halloween: 20% off the Vault until 31 October. Ends in 9d 02h 53m 07s

The Vault

Unlock the Vault library for £79.20

All 299 premium items in the Vault library, plus future additions to the library.

Browse UI elements

Pricing Slider - A pricing slider for SaaS plans: the price counts up as you drag, tiers snap magnetically, and a monthly/annual switch re-tweens the total
ui-008 £7

Pricing Slider

A pricing slider for SaaS plans: the price counts up as you drag, tiers snap magnetically, and a monthly/annual switch re-tweens the total.

count-upmicro-interaction
Segmented Control - A segmented control for view and timeframe switching: the indicator stretches as it slides, with icons, disabled and loading states
ui-009 £7

Segmented Control

A segmented control for view and timeframe switching: the indicator stretches as it slides, with icons, disabled and loading states.

micro-interactionelastic
Tag Input - A tag input for forms: type, paste or pick chips that spring in, drag or Alt+Arrow to reorder, with a suggestions list and a mount() API
ui-016 £7

Tag Input

A tag input for forms: type, paste or pick chips that spring in, drag or Alt+Arrow to reorder, with a suggestions list and a mount() API.

micro-interactionform-animation
Quantity Stepper - A quantity stepper for carts and booking forms: digits roll like an odometer, with hold to repeat and a shake at the limits
ui-017 £7

Quantity Stepper

A quantity stepper for carts and booking forms: digits roll like an odometer, with hold to repeat and a shake at the limits.

micro-interactionodometer-counter
iOS Toggle Switch - An iOS-style toggle switch on a native checkbox: tap or drag the knob, it snaps to the nearer side and the track colour cross-fades
ui-018 Free

iOS Toggle Switch

An iOS-style toggle switch on a native checkbox: tap or drag the knob, it snaps to the nearer side and the track colour cross-fades.

Draggable micro-interaction
Star Rating - A star rating input on native radios: hover sweeps the fill to the pointer, a click locks it in with a spring pop and a label
ui-030 Free

Star Rating

A star rating input on native radios: hover sweeps the fill to the pointer, a click locks it in with a spring pop and a label.

micro-interactionhover-effect
Dual Range Slider - A dual range slider for price filters: two thumbs that cannot cross, a histogram that lights bar by bar, a rolling result count and typed min/max
ui-031 £7

Dual Range Slider

A dual range slider for price filters: two thumbs that cannot cross, a histogram that lights bar by bar, a rolling result count and typed min/max.

Draggable micro-interaction
OTP Input - An OTP input for 2FA and verification codes: digits land with a bounce, paste fills every box, and a wrong code shakes and clears
ui-032 £7

OTP Input

An OTP input for 2FA and verification codes: digits land with a bounce, paste fills every box, and a wrong code shakes and clears.

micro-interactionform-animation
Multi-Step Form - A multi-step form: each completed step compresses into an answer trail and the submit button springs into a confirmation receipt
ui-033 £7

Multi-Step Form

A multi-step form: each completed step compresses into an answer trail and the submit button springs into a confirmation receipt.

micro-interactionform-animation
Date Range Picker - A date range picker: a date field opens a calendar popover with presets, a hover preview of the range and a staggered fill on selection
ui-043 £7

Date Range Picker

A date range picker: a date field opens a calendar popover with presets, a hover preview of the range and a staggered fill on selection.

staggerkeyboard-navigation
Custom Select Dropdown - A custom select dropdown in single and multi-select: type to filter, a sliding highlight, chips for chosen values and a real hidden select
ui-044 £7

Custom Select Dropdown

A custom select dropdown in single and multi-select: type to filter, a sliding highlight, chips for chosen values and a real hidden select.

micro-interactionstagger
Drag and Drop File Upload - A drag and drop file upload: dropped files land as rows, progress bars count up, finished uploads draw a check and failures offer Retry
ui-045 £7

Drag and Drop File Upload

A drag and drop file upload: dropped files land as rows, progress bars count up, finished uploads draw a check and failures offer Retry.

Flip progress-bar
Drag and Drop Sortable List - A drag and drop sortable list: the row lifts and follows the pointer while the others slide aside, with full keyboard reordering
ui-046 £7

Drag and Drop Sortable List

A drag and drop sortable list: the row lifts and follows the pointer while the others slide aside, with full keyboard reordering.

Draggable draggable
Slide to Confirm Button - A slide to confirm button for irreversible actions: flick or drag the thumb to confirm, with spring return, async pending state and a button fallback
ui-049 £7

Slide to Confirm Button

A slide to confirm button for irreversible actions: flick or drag the thumb to confirm, with spring return, async pending state and a button fallback.

draggablemicro-interaction
Inline Edit Field - An inline edit field: click a value to edit it in place, with optimistic saving, a pending shimmer, and rollback with Retry when a save fails
ui-050 £7

Inline Edit Field

An inline edit field: click a value to edit it in place, with optimistic saving, a pending shimmer, and rollback with Retry when a save fails.

Flip flip-layout
Kanban Board - A kanban board with drag and drop: cards lift and tilt as you drag between columns, other cards Flip aside and column counts roll
ui-053 £7

Kanban Board

A kanban board with drag and drop: cards lift and tilt as you drag between columns, other cards Flip aside and column counts roll.

Flip flip-layout
Monthly/Annual Pricing Toggle - A monthly/annual pricing toggle: a sliding thumb, a savings chip that Flips in beside Annual, and plan prices that roll like an odometer
ui-054 £7

Monthly/Annual Pricing Toggle

A monthly/annual pricing toggle: a sliding thumb, a savings chip that Flips in beside Annual, and plan prices that roll like an odometer.

Flip odometer-counter
Password Strength Meter - A password strength meter: a four-segment bar sweeps in and drains, rule ticks draw as each is met, with a confirm field match tick
ui-055 £7

Password Strength Meter

A password strength meter: a four-segment bar sweeps in and drains, rule ticks draw as each is met, with a confirm field match tick.

micro-interactionform-animation
AI Chat Interface - An AI chat interface: replies stream in word by word behind a caret, sent messages fly into their bubble, with stop and scroll anchoring
ui-057 £7

AI Chat Interface

An AI chat interface: replies stream in word by word behind a caret, sent messages fly into their bubble, with stop and scroll anchoring.

timed-streamstagger
Browse all 60 UI elements

Why animated controls earn their place

A control animates well when the motion carries information. The pricing slider counts its total up and down as you scrub, so the number and the handle are visibly one mechanism; the segmented switch stretches toward the option you chose before settling, confirming the change landed; the quantity stepper rolls digits like a counter wheel, so five taps read as five distinct increments. None of it is ornament: each movement answers what just changed.

They remain real form controls underneath. Values live in actual inputs that submit with a form and are reachable by keyboard: arrow keys move the sliders and steppers, the star rating and toggle work from the keyboard with visible focus, and the OTP input handles paste, backspace and auto-advance the way one-time-code fields are expected to.

Touch is treated as a first-class pointer, not an afterthought. Drags use net-displacement detection so a wobbly finger still registers as a tap, handles are sized for fingers, and nothing hides its state under a hover that touch screens cannot perform.

Styling follows the house pattern: every colour, radius and track dimension is a custom property in a variant block, so a control retunes to your brand in one place. Reduced motion swaps counts and springs for instant value changes, with the control still fully functional.

How to drop a control into your form

Each control is a fragment of form markup plus a script that animates it. It goes where any input would go, and submits like one.

  1. 1

    Copy the three includes

    Stylesheet, the GSAP CDN tag the control was built against, then the control script, in that order.

  2. 2

    Paste the control markup inside your form

    Each control wraps a real input, so it participates in form submission and validation like the native element it replaces. Keep the ids or update the selectors at the top of the script.

  3. 3

    Set your values and ranges

    Min, max, step and initial values are attributes on the markup, read at init. Currency and number formatting for count-ups sit in one formatting function you can edit.

  4. 4

    Pick a variant, then retune its tokens

    Track, fill, handle and focus-ring colours are custom properties per variant. Switch looks with the data-variant attribute or write your own block.

The variant block you edit
body[data-variant="vault"] {
  --track: #26262e;
  --fill: #c8ff00;
  --handle: #f4f1ea;
  --focus-ring: rgba(200, 255, 0, 0.4);
}

Inputs & Controls at a glance

Compare the 19 components in this category by what they do, what they are built with, and price.
Component What it doesBuilt withPrice
Pricing Slider A pricing slider for SaaS plans: the price counts up as you drag, tiers snap magnetically, and a monthly/annual switch re-tweens the total. GSAP core £7
Segmented Control A segmented control for view and timeframe switching: the indicator stretches as it slides, with icons, disabled and loading states. GSAP core £7
Tag Input A tag input for forms: type, paste or pick chips that spring in, drag or Alt+Arrow to reorder, with a suggestions list and a mount() API. GSAP core £7
Quantity Stepper A quantity stepper for carts and booking forms: digits roll like an odometer, with hold to repeat and a shake at the limits. GSAP core £7
iOS Toggle Switch An iOS-style toggle switch on a native checkbox: tap or drag the knob, it snaps to the nearer side and the track colour cross-fades. Draggable Free
Star Rating A star rating input on native radios: hover sweeps the fill to the pointer, a click locks it in with a spring pop and a label. GSAP core Free
Dual Range Slider A dual range slider for price filters: two thumbs that cannot cross, a histogram that lights bar by bar, a rolling result count and typed min/max. Draggable £7
OTP Input An OTP input for 2FA and verification codes: digits land with a bounce, paste fills every box, and a wrong code shakes and clears. GSAP core £7
Multi-Step Form A multi-step form: each completed step compresses into an answer trail and the submit button springs into a confirmation receipt. GSAP core £7
Date Range Picker A date range picker: a date field opens a calendar popover with presets, a hover preview of the range and a staggered fill on selection. GSAP core £7
Custom Select Dropdown A custom select dropdown in single and multi-select: type to filter, a sliding highlight, chips for chosen values and a real hidden select. GSAP core £7
Drag and Drop File Upload A drag and drop file upload: dropped files land as rows, progress bars count up, finished uploads draw a check and failures offer Retry. Flip £7
Drag and Drop Sortable List A drag and drop sortable list: the row lifts and follows the pointer while the others slide aside, with full keyboard reordering. Draggable £7
Slide to Confirm Button A slide to confirm button for irreversible actions: flick or drag the thumb to confirm, with spring return, async pending state and a button fallback. GSAP core £7
Inline Edit Field An inline edit field: click a value to edit it in place, with optimistic saving, a pending shimmer, and rollback with Retry when a save fails. Flip £7
Kanban Board A kanban board with drag and drop: cards lift and tilt as you drag between columns, other cards Flip aside and column counts roll. Flip £7
Monthly/Annual Pricing Toggle A monthly/annual pricing toggle: a sliding thumb, a savings chip that Flips in beside Annual, and plan prices that roll like an odometer. Flip £7
Password Strength Meter A password strength meter: a four-segment bar sweeps in and drains, rule ticks draw as each is met, with a confirm field match tick. GSAP core £7
AI Chat Interface An AI chat interface: replies stream in word by word behind a caret, sent messages fly into their bubble, with stop and scroll anchoring. GSAP core £7

Related guides

60 animated UI components built with GSAP (2026)

60 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Eleven are completely free to download.

Frequently asked questions

Do these submit real values with a form?

Yes. Each control wraps a native input that holds the value, so standard form submission, validation and server-side reading all work unchanged. The animation layer sits on top of the input, not instead of it.

Are the sliders and steppers usable by keyboard?

Yes. Arrow keys adjust sliders, steppers and ratings with visible focus states, and the OTP input handles typing, paste and backspace across its cells. Pointer, touch and keyboard all drive the same underlying value.

Can I change the currency or number format on the count-up controls?

Yes. Formatting is one function at the top of the script; change the locale, currency symbol or precision there and both the live count and the final value follow.

What do users with reduced motion enabled see?

Values change instantly instead of counting or springing, and everything else works identically. The check is prefers-reduced-motion, handled inside each control rather than left to you.

Browse all UI elements What GSAP UI elements are
Related categories
Buttons & FeedbackSearch & CommandComponent Kits