React form components
Free React form components for Tailwind CSS v4: inputs, selects, comboboxes, OTP, date and currency fields, with labels, errors and dark mode built in.
49 itemsFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Every field here ships with its label, hint and error states wired, so a form reads the same from the first input to the last. They are built on Base UI where a primitive exists, which means keyboard, focus and screen reader behavior come for free.
Install one field or the whole set. Each file uses semantic tokens, so the same input looks right in light, dark and every material without a single override.
Components 47
AutocompleteuiText input that filters string options as you type, using ARIA combobox and listbox roles. Works controlled or uncontrolled and lists up to eight matches.npx shadcn@latest add ui.minidev.pro/r/autocomplete.jsonCalendar MonthuiMonth calendar grid with weekday headers and clickable day cells that highlight the selected date. A simple Tailwind base for date views and schedulers.npx shadcn@latest add ui.minidev.pro/r/calendar-month.jsonCharacter CountuiLive React character counter that shows the current count against a limit and turns red when it goes over. Announces changes politely to screen readers.npx shadcn@latest add ui.minidev.pro/r/character-count.jsonCheckbox GroupuiVertical wrapper that groups related checkboxes under role group with even spacing. Use it with Checkbox and labels for multi select settings.npx shadcn@latest add ui.minidev.pro/r/checkbox-group.jsonCheckboxuiShadcn style checkbox on Base UI with an animated check, indeterminate state, invalid and disabled styles, and an enlarged hit area for touch.npx shadcn@latest add ui.minidev.pro/r/checkbox.jsonChip FilteruiSingle select filter chips in React that behave as a radio group, with an accent ring on the active chip. Good for quick filters above lists and tables.npx shadcn@latest add ui.minidev.pro/r/chip-filter.jsonChoice CarduiSelectable React card button with an icon, title and description, using aria-pressed and an accent outline when chosen. Suits plan pickers and onboarding.npx shadcn@latest add ui.minidev.pro/r/choice-card.jsonColor PickeruiSwatch color picker with eight OKLCH presets, a ring on the selected swatch and listbox semantics. Works controlled or uncontrolled for theme or label colors.npx shadcn@latest add ui.minidev.pro/r/color-picker.jsonComboboxuiShadcn style combobox: a popover select with a filter input, check mark on the chosen item and an empty message. Built on Base UI popover for React.npx shadcn@latest add ui.minidev.pro/r/combobox.jsonComment ComposeruiComment box with a three row textarea and a Comment button that stays disabled until there is text. Submits the trimmed value and clears the field.npx shadcn@latest add ui.minidev.pro/r/comment-composer.jsonCurrency InputuiMoney input with a currency code prefix, decimal keypad on mobile and tabular numbers. Controlled via a string value to avoid rounding issues in React forms.npx shadcn@latest add ui.minidev.pro/r/currency-input.jsonDate PickeruiDate picker built on the native date input, styled to match the rest of your form fields. Returns ISO date strings and supports disabled and labelled states.npx shadcn@latest add ui.minidev.pro/r/date-picker.jsonDate Range PickeruiStart and end date range picker made from two labelled date inputs. Works controlled or uncontrolled and returns a from and to object for filters and reports.npx shadcn@latest add ui.minidev.pro/r/date-range-picker.jsonEditable HeadinguiInline editable title that looks like a large heading but is a text input. Use it for document, page or project names; works controlled or uncontrolled.npx shadcn@latest add ui.minidev.pro/r/editable-heading.jsonEmoji PickeruiCompact emoji picker grid with a default set of twelve reactions or your own list, using listbox and option roles. Calls onSelect with the chosen emoji.npx shadcn@latest add ui.minidev.pro/r/emoji-picker.jsonFacet FilteruiA titled checkbox facet group for sidebar search filters in React. Each option can show a result count, and the selected values come back as an array.npx shadcn@latest add ui.minidev.pro/r/facet-filter.jsonFile DropzoneuiA React drag and drop upload zone with accept and reject states, type and size checks, image previews, per file progress, retry and screen reader updates.npx shadcn@latest add ui.minidev.pro/r/file-dropzone.jsonForm FielduiA wrapper that pairs any input with its label, required marker, help text and an error message announced with role alert. Keeps React forms consistent.npx shadcn@latest add ui.minidev.pro/r/form-field.jsonImage UploaduiA single image picker that starts as a drag and drop zone, then swaps to a large preview with a remove button. Returns an object URL and the File in React.npx shadcn@latest add ui.minidev.pro/r/image-upload.jsonInput AffixuiA text input with leading and trailing slots for icons, units or buttons, sharing one focus ring and invalid state across the field. Tailwind styled.npx shadcn@latest add ui.minidev.pro/r/input-affix.jsonInputuiThe base text input with sm, default and lg sizes and designed hover, focus, disabled, read only and invalid states. A drop in shadcn style input for React.npx shadcn@latest add ui.minidev.pro/r/input.jsonLabeluiA form label that dims and blocks pointer events when its peer input or group is disabled. Native label API, styled with Tailwind like the shadcn label.npx shadcn@latest add ui.minidev.pro/r/label.jsonMention InputuiA comment textarea that opens a suggestion list when you type @, filters names as you keep typing and inserts the chosen @mention. For React comments.npx shadcn@latest add ui.minidev.pro/r/mention-input.jsonMulti SelectuiA multi select dropdown in a popover with check marks on chosen items and removable chips below the trigger. Works controlled or uncontrolled in React.npx shadcn@latest add ui.minidev.pro/r/multi-select.jsonNumber InputuiA numeric stepper with minus and plus buttons around a centered input that clamps to min and max and moves by a custom step. Works controlled or uncontrolled.npx shadcn@latest add ui.minidev.pro/r/number-input.jsonPassword InputuiA password field with a show and hide toggle inside the input, an eye icon that swaps state and an accessible label. Supports sm, default and lg sizes in React.npx shadcn@latest add ui.minidev.pro/r/password-input.jsonPhone InputuiA telephone number field with type tel, a numeric keypad on mobile, tel autocomplete, tabular digits and a default aria label. Styled like the React base input.npx shadcn@latest add ui.minidev.pro/r/phone-input.jsonRadio GroupuiAccessible radio group on Base UI with keyboard navigation, a springy checked dot, larger hit areas, and invalid and disabled states. A shadcn-style drop in.npx shadcn@latest add ui.minidev.pro/r/radio-group.jsonRange SlideruiTwo-thumb range slider for picking a min and max, with value bubbles on both thumbs while dragging, optional marks, a formatter and an onValueCommitted hook.npx shadcn@latest add ui.minidev.pro/r/range-slider.jsonRatinguiStar rating input rendered as a radiogroup, with one labelled radio per star, a configurable max, disabled state, and controlled or uncontrolled value in React.npx shadcn@latest add ui.minidev.pro/r/rating.jsonRich Text ToolbaruiFormatting toolbar with bold and italic toggles, link, bullet and numbered list buttons, and a divider. Uses role toolbar with labelled icon toggles in React.npx shadcn@latest add ui.minidev.pro/r/rich-text-toolbar.jsonSearch InputuiSearch input with a leading search icon and a clear button that appears once there is text. Comes in sm, default and lg sizes, controlled or uncontrolled.npx shadcn@latest add ui.minidev.pro/r/search-input.jsonSearch With ResultsuiSearch field with a results list below it showing titles and optional subtitles, plus a No results state. Emits onSearch as you type so you can filter in React.npx shadcn@latest add ui.minidev.pro/r/search-with-results.jsonSegmented ControluiSegmented control with a raised thumb that springs between options, arrow, Home and End key support, icons, badges, three sizes and reduced motion support.npx shadcn@latest add ui.minidev.pro/r/segmented-control.jsonSelectuiSelect dropdown on Base UI with a trigger in three sizes, an animated popup, groups, labels, separators, a check indicator and scroll arrows. Shadcn-compatible.npx shadcn@latest add ui.minidev.pro/r/select.jsonSlash Command MenuuiReact slash command menu that filters commands by the typed query, shows each as /name with an optional hint, and falls back to a No commands message.npx shadcn@latest add ui.minidev.pro/r/slash-command-menu.jsonSlideruiSlider on Base UI with a hairline rail, a keycap thumb, a value bubble while dragging, optional labelled marks, Intl number formatting and vertical support.npx shadcn@latest add ui.minidev.pro/r/slider.jsonSwitchuiSwitch on Base UI whose thumb stretches on press then springs across, with sm and default sizes, a loading spinner state and an optional clickable label row.npx shadcn@latest add ui.minidev.pro/r/switch.jsonTags InputuiReact tags input that adds a chip on Enter or comma, skips duplicates, removes the last tag on Backspace and gives each chip a labelled remove button.npx shadcn@latest add ui.minidev.pro/r/tags-input.jsonTextareauiMultiline textarea with a 96px minimum height, comfortable line height, hairline border, focus ring and subtle placeholder. A shadcn-compatible Textarea.npx shadcn@latest add ui.minidev.pro/r/textarea.jsonTime PickeruiReact time picker built on the native time input, styled to match the other inputs, with a controlled value, onChange, disabled state and an aria-label.npx shadcn@latest add ui.minidev.pro/r/time-picker.jsonUser ChipuiReact user chip showing a small avatar with initials fallback and the person's name, plus an optional remove button. Good for assignees, mentions and pickers.npx shadcn@latest add ui.minidev.pro/r/user-chip.jsonWorkspace CreateuiA compact create workspace form in React with a required name field, a URL slug input and a submit button wired to an onCreate callback.npx shadcn@latest add ui.minidev.pro/r/workspace-create.jsonPassword StrengthuiA React password field with a four step strength meter and a live rule checklist. Announces the score politely and accepts your own scorer such as zxcvbn.npx shadcn@latest add ui.minidev.pro/r/password-strength.jsonSignature PaduiDraw a signature with mouse, pen or finger on a canvas with pressure aware strokes, undo and clear, a typed name fallback and PNG export for forms.npx shadcn@latest add ui.minidev.pro/r/signature-pad.jsonMasked InputuiReact masked input that formats phone numbers, dates, plates and IBANs as you type from a mask, keeps the caret steady on edits and pastes, and returns masked and raw values.npx shadcn@latest add ui.minidev.pro/r/masked-input.jsonFloating Label InputuiReact floating label input and textarea where the label springs from inside the field onto the top border on focus or fill, with helper text, error state and leading icon.npx shadcn@latest add ui.minidev.pro/r/floating-label-input.json
Blocks and full pages 2
Form WizardblockA three step React form wizard with a stepper for basics, details and review, per step fields, and back and next buttons that become submit at the end.npx shadcn@latest add ui.minidev.pro/r/form-wizard.jsonOnboarding FlowblockA three step onboarding card for naming a workspace, inviting teammates by email and reviewing theme choices, with step progress and back or continue.npx shadcn@latest add ui.minidev.pro/r/onboarding-flow.json
See them live
Galleries render these components with sample data in every state.
Frequently asked questions
Do these form components work with React Hook Form?
Yes. Inputs forward refs and accept the standard value, onChange and name props, so they register with React Hook Form, Conform or plain controlled state.
Are the inputs accessible?
Labels are connected with htmlFor and aria-describedby for hints and errors, focus rings are always visible, and composite widgets like combobox and select use Base UI primitives for keyboard support.
Can I use them with shadcn/ui?
Yes. They install with the shadcn CLI from a URL and use the same @/components/ui layout, so they sit next to your existing shadcn components.