Charcoal UI

React Input Components

Animated React buttons, sliders, switches, selects, date pickers and form inputs.

About these input components

Every control a form or settings page needs, built so it feels good to use: buttons with real press feedback, sliders that stretch, switches that squash, selects that grow out of their trigger, OTP and code inputs, date range pickers and full sign-up forms.

Each one is a real form control under the motion. It has an accessible name, works from the keyboard alone, and announces its state, so the delight never costs anyone the ability to use it.

Where they earn their keep

  • Sign-up, login and checkout forms.
  • Settings and preference screens.
  • Filters, sorting and search controls.
  • Pricing calculators and configurators.

How they are built

Controls are controlled or uncontrolled with the usual value, defaultValue and onValueChange props, so they drop into React Hook Form, server actions or plain state. Motion runs on transforms and springs, and every component respects reduced motion.

Each one is a single file you copy into your project with the shadcn CLI and own outright. They are written for React 19 and Tailwind CSS 4 with Motion, use only your theme's CSS variables, and work in Next.js, Vite, Remix and Astro.

All 68 input components

18 are free and MIT licensed, and 50 are part of Charcoal UI Pro, which covers all 393 Pro components, 112 sections and 100 templates for one price. Open any of them to try it live, tune it and copy the code.

  • Range Slider: Six animated React range sliders on one accessible core: inline, tick, fluid, wave, bubble and ruler
  • Button: An animated React button with six variants, spring press feedback and a width-stable loading state
  • Magnetic (Pro): Make any React element lean toward the pointer and spring home: a magnetic hover in one wrapper
  • Switch: An animated React toggle switch whose thumb stretches when pressed, like a real switch
  • Checkbox: An animated React checkbox: the check draws itself in, the box pops, indeterminate morphs to a dash
  • Radio Group: An animated React radio group with roving focus and a highlight that glides between card options
  • Input: An animated React text input with icons, a shake-once error and a success check that draws in
  • OTP Input: An animated React one-time-code input with paste support, autofill and digits that pop in
  • Stepper: An animated React number stepper whose digits roll in the direction you press
  • Segmented Control: An animated React segmented control with a pill that glides to the selected option
  • Select: An animated React select with staggered options, full keyboard support and type-ahead
  • Color Picker (Pro): An animated React swatch colour picker with a ring that glides to the selection
  • Rating (Pro): An animated React star rating with hover preview and a ripple of popping stars
  • Tag Input: An animated React tag input: Enter or comma adds chips, Backspace removes them safely
  • Password Input: An animated React password input with a show and hide eye and a live strength meter
  • Search Input: An animated React search input that springs open from an icon and collapses on Escape
  • Toggle Group: An animated React toggle group for toolbars, single or multiple, with pills that pop in
  • File Dropzone (Pro): An animated React file dropzone that lifts on hover and lists uploads with progress
  • Like Button (Pro): An animated React like button: the heart pops, sparks burst and the count rolls
  • Hold to Confirm (Pro): A React hold-to-confirm button for destructive actions: hold while it fills, let go to cancel
  • Shimmer Button (Pro): An animated React shimmer button with an orbiting accent edge and a sweeping sheen
  • Slide to Confirm (Pro): A React slide-to-confirm control: drag the knob across to confirm, Enter from the keyboard
  • Textarea: An auto-growing React textarea with a character ring that warms near the limit
  • Wheel Picker (Pro): An iOS-style React wheel picker built on native scroll-snap, with 3D tilting rows
  • Calendar (Pro): An animated React calendar where months slide and the selection glides between days
  • Scrub Input (Pro): A Figma-style React number field: drag the label to scrub values, or click and type
  • Dual Range Slider (Pro): An animated React dual range slider: two thumbs on one track for picking a range
  • Knob (Pro): An animated React rotary knob: drag, scroll or use arrow keys, with an accent arc
  • Combobox: An animated React combobox: type to filter, matches highlighted, keyboard friendly
  • Specular Button (Pro): A React button with a specular highlight that follows the pointer and a press ripple
  • Curved Input (Pro): A React text input whose curved underline bends toward the caret as you type
  • Split Button (Pro): An animated React split button: a primary action plus secondary actions that unfold inline
  • Morphing Search (Pro): A React search icon that morphs into a full input with results dropping in beneath
  • PIN Pad (Pro): An animated React PIN pad: dots fill, keys spring, wrong codes shake and clear
  • Signature Pad (Pro): A React signature pad with pen-like ink, undo, clear and PNG export
  • Password Strength (Pro): A React password strength meter with a segmented bar and a live rule checklist
  • Multi Select (Pro): An animated React multi-select with chips, type-to-filter and full keyboard control
  • Chip Group (Pro): Animated React selectable chips, single or multiple, with checks that grow in
  • Credit Card Input (Pro): An animated React credit card form with live formatting, brand detection and a flipping card
  • Time Picker (Pro): An animated React time picker with snapping scroll columns for hours, minutes and AM or PM
  • Emoji Reaction (Pro): An animated React emoji reaction bar with bursting picks and bouncing counts
  • Color Wheel (Pro): A React colour wheel with a hue ring, saturation square and hex readout, no canvas
  • Swipe Cards (Pro): Animated React swipe cards: drag left or right with stamps, fling and undo
  • Bell Toggle (Pro): A React notification toggle where the bell rings and the pill reshapes as it turns on
  • Jelly Radio: A React radio group of chips that swell like jelly and nudge their neighbours
  • Rubber Segment (Pro): A React segmented control whose thumb stretches like rubber between options
  • Squish Switch (Pro): A React switch whose thumb stretches with speed and squashes at the ends
  • Peek Rating (Pro): A React star rating that lifts stars as you hover and bursts when you commit
  • Elastic Slider (Pro): A React slider that stretches like rubber when you pull past either end
  • Fuse Button (Pro): A React delete button with an undo window shown as a burning fuse
  • Glide Select (Pro): A React select with a menu that pops from its corner and a gliding highlight
  • Comet Dial (Pro): A React tick-ring dial with a comet tail that streaks when you turn it fast
  • Code Slots (Pro): A React one-time code input where digits drop and spring into their slots
  • Sling Button (Pro): A React send button you pull back like a slingshot and release to fire
  • Wake Slider (Pro): A thumbless React slider of bars that leaves a wake when you drag fast
  • Toggle: A free animated React toggle button for toolbars, with aria-pressed
  • Date Range Picker (Pro): A React date range picker with two months, presets and a live hover preview
  • Select Morph (Pro): A React select whose trigger grows into the list in place
  • Ruler Slider (Pro): A React ruler slider you fling under a fixed needle with inertia
  • Arc Picker (Pro): A React picker that lays options around an arc with a draggable knob
  • Expandable Control (Pro): A compact React volume pill that expands into a slider on hover
  • Questionnaire (Pro): A React one-question-at-a-time form with keyboard shortcuts and progress
  • GitHub Stars Button (Pro): A React GitHub stars button with a live count that counts up
  • Liquid Button (Pro): A React button that fills with rolling liquid on hover
  • Flip Button (Pro): A React button that rolls like a cube to reveal a second label
  • Signup Form (Pro): A React sign-up form with a password strength meter and checklist
  • Availability Scheduler (Pro): A React weekly availability grid you paint by dragging
  • Token Swap (Pro): A React token swap panel with live quotes and a spinning flip

Install one

npx shadcn@latest add https://charcoalui.com/r/range-slider.json

Every page shows the exact command. The CLI adds the file to components/ui along with any dependency it needs, and AI coding agents can do the same through the Charcoal UI MCP server.

Other categories

Browse the rest of the library by what you are building.

Frequently asked questions

Do these inputs work with React Hook Form?
Yes. Each control takes value and onValueChange (or checked and onCheckedChange), so you wire it with a Controller exactly like a shadcn input.
Are the inputs accessible?
Yes. They use native elements or the matching ARIA roles (slider, switch, radiogroup, listbox), support the keyboard patterns people expect, and show a visible focus ring.
Which input components are free?
The everyday ones, such as Button, Switch, Checkbox, Radio Group, Input, OTP Input and Range Slider, are free and MIT. The showpieces are marked Pro.
Do these input components work with shadcn/ui?
Yes. Charcoal UI is a shadcn registry, so components install with the same CLI, use the same CSS variables and sit next to your existing shadcn components.