# Input & Control Components

> Form controls with the motion already tuned: pricing sliders with count-up totals, elastic segmented switches, steppers, star ratings, OTP inputs and step forms.

Canonical: https://gsapvault.com/ui-elements/category/inputs-controls

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.

## 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. **Copy the three includes:** Stylesheet, the GSAP CDN tag the control was built against, then the control script, in that order.
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. **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. **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.

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

## Inputs & Controls at a Glance

| Component | What it does | Built with | Price |
| --- | --- | --- | --- |
| [Count-Up Pricing Slider](https://gsapvault.com/ui-elements/pricing-count-up-slider) | Pricing scrubber with magnetic tier snapping, a value bubble that tracks the thumb, and a monthly/annual switch that re-tweens the price instead of jumping it. | GSAP core | £5 |
| [Elastic Segmented Switch](https://gsapvault.com/ui-elements/elastic-segmented-switch) | Segmented control whose indicator stretches in proportion to the distance it travels, with icons, disabled and busy option states, and a strip that scrolls when the options outgrow it. | GSAP core | £5 |
| [Tag Input Chips](https://gsapvault.com/ui-elements/tag-input-chips) | Text input that turns Enter or comma into a chip: chips pop in with a spring, collapse their width on removal and shake when a duplicate is typed. | GSAP core | £5 |
| [Quantity Stepper Roll](https://gsapvault.com/ui-elements/quantity-stepper-roll) | Minus and plus stepper whose digits roll vertically like an odometer, with press squash, hold to repeat and a refusal shake at the limits. | GSAP core | £5 |
| [iOS Toggle Switch](https://gsapvault.com/ui-elements/ios-toggle-switch) | Native checkbox toggle whose knob can be tapped or dragged, snaps to the nearer side, stretches while pressed and cross-fades the track colour. | Draggable | Free |
| [Star Rating Input](https://gsapvault.com/ui-elements/star-rating-input) | Five-star rating on native radios: hovering sweeps the fill up to the pointer with a stagger, clicking locks it with a spring pop, a sparkle and a cross-faded word. | GSAP core | £5 |
| [Dual Range Slider](https://gsapvault.com/ui-elements/dual-range-slider) | Min and max range with two draggable thumbs that cannot cross, a stretching selected segment, and value bubbles that rise and count while you drag. | Draggable | £5 |
| [OTP Code Input](https://gsapvault.com/ui-elements/otp-code-input) | Six-box one-time-code field over a single native input: each digit lands with a bounce, a ring slides to the next box, a paste fills every box in sequence and a wrong code shakes and clears. | GSAP core | £5 |
| [Spring Step Form](https://gsapvault.com/ui-elements/spring-step-form) | A three-step form where each completed answer compresses into a summary rail and the final submit button springs into a confirmation state. | GSAP core | £5 |

## Components in This Category

### Count-Up Pricing Slider

Pricing scrubber with magnetic tier snapping, a value bubble that tracks the thumb, and a monthly/annual switch that re-tweens the price instead of jumping it.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/pricing-count-up-slider)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/pricing-count-up-slider.md)

### Elastic Segmented Switch

Segmented control whose indicator stretches in proportion to the distance it travels, with icons, disabled and busy option states, and a strip that scrolls when the options outgrow it.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/elastic-segmented-switch)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/elastic-segmented-switch.md)

### Tag Input Chips

Text input that turns Enter or comma into a chip: chips pop in with a spring, collapse their width on removal and shake when a duplicate is typed.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/tag-input-chips)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/tag-input-chips.md)

### Quantity Stepper Roll

Minus and plus stepper whose digits roll vertically like an odometer, with press squash, hold to repeat and a refusal shake at the limits.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/quantity-stepper-roll)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/quantity-stepper-roll.md)

### iOS Toggle Switch

Native checkbox toggle whose knob can be tapped or dragged, snaps to the nearer side, stretches while pressed and cross-fades the track colour.

- Type: UI component · Tier: free · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/ios-toggle-switch)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/ios-toggle-switch.md)

### Star Rating Input

Five-star rating on native radios: hovering sweeps the fill up to the pointer with a stagger, clicking locks it with a spring pop, a sparkle and a cross-faded word.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/star-rating-input)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/star-rating-input.md)

### Dual Range Slider

Min and max range with two draggable thumbs that cannot cross, a stretching selected segment, and value bubbles that rise and count while you drag.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/dual-range-slider)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/dual-range-slider.md)

### OTP Code Input

Six-box one-time-code field over a single native input: each digit lands with a bounce, a ring slides to the next box, a paste fills every box in sequence and a wrong code shakes and clears.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/otp-code-input)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/otp-code-input.md)

### Spring Step Form

A three-step form where each completed answer compresses into a summary rail and the final submit button springs into a confirmation state.

- Type: UI component · Tier: premium · Difficulty: intermediate
- [View component](https://gsapvault.com/ui-elements/spring-step-form)
- [Clean Markdown for AI agents](https://gsapvault.com/ui-elements/spring-step-form.md)

## Related Guides

- [35 animated UI components built with GSAP (2026)](https://gsapvault.com/blog/gsap-ui-components) ([Markdown](https://gsapvault.com/blog/gsap-ui-components.md)): 35 animated UI components built with GSAP: navigation, modals, command palettes, tables, form controls and buttons. Two 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.

## Related Categories

- [Button & Feedback Components](https://gsapvault.com/ui-elements/category/feedback-status)
- [Search & Command Components](https://gsapvault.com/ui-elements/category/search-command)

---

From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects, UI components and complete website templates. Full catalog for agents: https://gsapvault.com/llms-full.txt