React input components for Tailwind CSS
Inputs are where people type, pick and upload, and this is the largest category in the library. It covers text fields (Input, Textarea, Search Input, Email Input, Password Input and Masked Input), numbers and money (Number Input and Currency Input), and codes and contacts (OTP Input and Phone Input). Pickers handle dates, date ranges, times, months, durations, cron schedules and colors. For choosing from a list there are Select, Combobox, Multi Select, Listbox, Tag Input and Mention Input, and for on / off states and ranges there are Checkbox, Radio Group, Switch, Segmented Control, Slider and Rating. File Upload, Avatar Upload and Signature Pad take files, photos and signatures.
All Inputs[36]
Avatar Upload
Change a profile picture like on a phone: pick or shoot a photo, crop it in a round frame and watch a ring fill while it uploads.
Color Picker
A color field with a saturation / brightness square, hue and opacity sliders, HEX / RGB / HSL inputs, swatches and an eyedropper.
Calendar
A month grid for picking one day, several days or a stay, with disabled days, event dots, several months and a quick month / year jump.
Slider
Pick a number or a range by dragging: any number of thumbs, labelled marks, a value bubble, vertical, tones and finger-sized thumbs.
SwitchFree
An on / off setting that applies at once: a spring thumb that stretches and drags like iOS, thumb icons, and async saves that roll back.
Masked Input
A text field that formats itself as you type or paste: card number, expiry, CVC, IBAN, CNP, postal code or a custom mask.
Segmented ControlFree
The iOS segmented control: pick one of a few options on a raised thumb that slides, and on touch drags along with your finger.
Date Range Picker
A date range field for reports and bookings: two months with presets and Apply / Cancel on desktop, a bottom sheet with one month on phones.
CheckboxFree
A box that is on, off or mixed with a check that draws itself, a label row that is the whole target, cards, and groups with select all.
Combobox
An autocomplete field: type to filter a list or search a server, with matches in bold, a create row and free text; a search sheet on phones.
Cron Picker
Build a schedule without knowing cron: frequency tabs, weekday and day chips, a time, a sentence that says it back and the next runs.
Currency Input
A money field formatted per locale as you type, with the symbol on the right side, an optional currency selector and quick amounts.
Date Picker
A date field to type in your locale or pick from a calendar popover, with presets, limits and an optional time; a sheet on phones.
Date Time Picker
A day and a time in one field: a calendar beside a column of free time slots, presets and a time zone label; a sheet on phones.
Email Input
An email field for one address or a list of recipients, with domain completion, typo hints, contacts and validation.
File Upload
Add files by dropping, browsing, pasting or taking a photo: validation, previews, per-file progress, and list, grid or avatar layouts.
Filter Builder
Advanced filters for any list: condition chips, AND / OR, nested groups, saved views and a live count, with one bottom sheet on phones.
InputFree
The single-line text field: icons and addons inside the box, a clear button, a loading spinner, a counter and floating labels.
Input Group
Joins a field with text addons, selects, icons and buttons into one box with one focus ring and one error state.
ListboxFree
A searchable list of options for single or multiple choice, with groups, async loading, create-new and virtualized rows.
Mention Input
A note field where @ mentions people, # adds tags and any trigger you define inserts chips, stored as markup that survives renames.
Month Picker
Pick a month or a range of months from a year grid, with quarters and presets, for reports, billing periods and card expiry dates.
Multi Select
Pick several options from a list, shown as chips with a measured +N overflow, with search, select all, a maximum and async options.
Number Input
A field for numbers people type or step: steppers with hold to repeat, min, max and step, and Intl formatting for money and units.
Password Input
A password field with a caret-safe reveal toggle, a Caps Lock warning and, for sign-up, a strength meter, rules checklist and generator.
Phone Input
A phone number field with a searchable country picker, formatting as you type, validation and one clean E.164 value out.
Radio GroupFree
Pick exactly one of a few visible options: rows with a dot that springs in, or cards with icons, prices and a selection ring that slides.
Rating
Rate or show a rating with stars or any icon: half values, a hover preview, a label per value and a fill that pops.
Search InputFree
The search field for lists and pages: debounced search, a focus shortcut, a spinner, a results count, recent searches and suggestions.
SelectFree
A custom select with search, groups, icons, thousands of virtualized rows and a hidden native select for forms.
Signature Pad
Sign with a finger, a pen or a mouse, with ink that thins with speed like a real pen, or type your name; exports PNG or SVG.
Tag Input
A field that turns typed, pasted or suggested text into removable chips, for tags, keywords and email recipients.
TextareaFree
Multi-line text that grows with what you write, with a counter, an optional resize handle, a toolbar slot and mod+enter to submit.
Guides
Tutorials and guides from the blog that use these components.
Comparisons and alternatives
Best React Component Library for Mobile in 2026: 9 Compared
The best React component library for mobile web apps in 2026: 9 libraries checked at 390px for bottom sheets, touch targets, safe areas and gestures.
12 min read
Building UI with AI agents
Claude Code shadcn Setup: MCP Server, Skill and CLAUDE.md
Claude Code shadcn setup, tested on shadcn 4.21.4: the MCP server, the skill, a second registry in its own folder, a CLAUDE.md block and prompts that work.
12 min read
Build it: screens and apps
E-Factura VAT Calculation in TypeScript and React
E-Factura VAT calculation in TypeScript: Romania's 21% and 11% rates, VAT rounded once per rate, the totals ANAF checks to the cent and a React line editor.
11 min read
Component guides
IBAN Validation JavaScript: Mod 97, Regex and a React Field
IBAN validation JavaScript that catches typos: mod 97 in TypeScript, why a regex is not enough, a React field that formats as you type and Romanian banks.
12 min read
Mobile UI in React
Minimum Touch Target Size: WCAG, iOS, Android and Tailwind
Minimum touch target size per WCAG 2.2 (24 and 44px), iOS (44pt) and Android (48dp), and how to get 44px taps in React and Tailwind without desktop bloat.
11 min read
Next.js and Tailwind CSS
React 19 forwardRef Migration: ref as a Prop in TypeScript
React 19 forwardRef migration in TypeScript: take ref as a regular prop, type it with ComponentProps, merge refs with cleanups and keep asChild working.
9 min read
About Inputs
Fields share one box recipe, with labels, hints and errors from Field. On a phone the text is 16px so iOS never zooms, the keypad follows the type, rows and targets grow to 44px, and list pickers open as bottom sheets instead of popovers. Numbers, dates and money are formatted for the locale through Intl. 11 of the 36 inputs are free: the source is open to everyone through the CLI, shadcn and the docs page (the MCP server needs a free account key). The other 25 are part of Pro.