Tailwind CSS Form Components

Dev Design Library indexes 340 Tailwind CSS form components from 42 open-source UI libraries, with the most coming from FLX UI, Watermelon UI, Tremor Blocks, Origin UI and Oxbow UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Every library in this list styles its components with Tailwind CSS utility classes. Form components belong to the Inputs group.

Showing 120 of 340, a mix from every library. Open a library to see all of its components.

• Login 01shadcn/ui · ReactA simple login form.
• FieldsetHeroUI · ReactGroup related form controls with legends, descriptions, and actions
• FormReact Spectrum · ReactForms allow users to enter data that can be submitted while providing alignment and styling for form fields.
• Fieldsetcoss ui · ReactA native fieldset element with a legend.
• Comp 119Origin UI · React
• Floating PanelCult UI · ReactFloating panel component with backdrop blur and position-aware animations
• Advanced clean login form cardReUI · ReactAdvanced clean login form card
• QuestionAI Elements · ReactA composable prompt for collecting choices, freeform text, or both from a user.
• AI CheckoutKokonut UI · ReactAn order the assistant puts together, paid without leaving the chat. The button fills while the charge runs, then the…
• auth-01Intent UI · Reactauth-01
• FormUntitled UI React · React
• Feedback WidgetbeUI · ReactCorner trigger that morphs open into a feedback popup with message entry and animated sending, success and retry states.
• Account Access CardSpectrum UI · ReactA credentials card that auto-fills email and password on a loop, with a danger zone.
• FormVengeance UI · React
• Ask User QuestionsFluid Functionalism · ReactStepped question flow with numbered options, keyboard shortcuts (1–9), single or multi-select, inline 'other' text…
• FormPanel UI · React NativeForm state — values, validation and submission — with no form library underneath.
• Alert 18 - Form Error SummaryShadcn Space · ReactForm error summary alert that lists every invalid field with links that focus it, receives focus on submit, and clears…
• Contact FormOpenSourceUI · React
• Drawer Buttonsuselayouts · ReactTwo buttons that open side drawers with a 3D fold. Payment comes from the right, cart from the left, and the fields…
• AuthBoardUI · React
• Account And User Management 01Tremor Blocks · React
• Contact Onecnblocks · SvelteContact form with input fields and submit button
• FormObsidianUI · React
• Cta Newsletter 01Oxbow UI · AstroNewsletter CTA with benefits
• Banner SubscribeNexvyn UI · ReactAn email signup banner with inline validation that crossfades into a confirmation on success.
• Microphone Setupaudiocn · ReactChoose and check a microphone: device select with a live preview, a level meter, gain, mute and a level check that…
• Animated FormForge UI · ReactAnimated form mimicking account creation with progressive name/password animation and completion checkmarks.
• Template AuthShark UI · React
• Aave Swap ComponentWatermelon UI · React
• Auth Fivesv-efferd · SvelteA split-screen auth experience with animated background paths and broader provider options.
• Multi Step FormUI Lab · ReactSlides between steps while the card grows around each one.
• QuestionnaireHextaUI · ReactA step-by-step form that moves between questions with a sense of direction, shows real progress and answers from the…
• Data Extractor BlockLocalMode · ReactSchema-validated structured-data extraction from free text over its OWN on-device WebGPU-only WebLLM model (default…
• QuestionnaireCojeev UI · ReactA little guided brief: open questions, a focused journey or a two-column worksheet with living choice marks and honest…
• Login formFLX UI · ReactEmail and password fields with sign-in and OAuth buttons.
• Split login pageVelora UI · ReactLogin form with password reveal, remember-me and social sign-in beside an aurora testimonial panel.
• FormSpaceUI · ReactManages form inputs, checks for validation errors, and handles form submission to ensure a smooth data entry experience.
• FieldOUI · ReactShadcn Field with react aria components characteristics.
• AI Content Creator CardD2Studio UI · ReactPro version content creation card
• FieldFibo · ReactA label, description and error wired to one form control, with a group that sets the size of a whole form.
• Credit Card InputReactFrame · ReactA grouped card number, expiry and CVC field: brand detection with an animated mark, 4-4-4-4 or Amex 4-6-5 spacing…
• Fieldsetark-cn · ReactA shadcn-style fieldset component built with Ark UI primitives.
• Login 02shadcn/ui · ReactA two column login page with a cover image.
• FormHeroUI · ReactWrapper component for form validation and submission handling
• Tailwind FormReact Spectrum · React
• Formcoss ui · ReactA form wrapper component that simplifies validation and submission.
• Comp 120Origin UI · React
• Morph SurfaceCult UI · ReactA morphing surface component with smooth animations, customizable dimensions, and configurable content
• Fields with input groupsReUI · ReactFields with input groups
• Avatar PickerKokonut UI · ReactGenerated avatars from a name, morphing as you type, on a 3D coin you can flick, tap or shuffle.
• auth-02Intent UI · Reactauth-02
• Signup FormbeUI · ReactComposed sign-up form that flags a field only once it is left, then clears the moment it is fixed, with a…
• Login CardSpectrum UI · Reactcomponent for the Login Card
• Web InspectorPanel UI · React NativeA design inspector panel with alignment, color, fill, text and shadow controls.
• Checkbox-06 - Checkbox with formShadcn Space · ReactCheckbox component
• Forgot Password FormOpenSourceUI · React
• Multi Step Formuselayouts · ReactA dynamic, animated multi-step form with validation.
• SettingsBoardUI · React
• Account And User Management 02Tremor Blocks · React
• Contact Twocnblocks · SvelteTwo-column contact section with form and info
• Cta Newsletter 02Oxbow UI · AstroSplit CTA with logo and custom avatars
• Footer NewsletterNexvyn UI · ReactA footer with a release notes signup, four link columns and a bottom bar.
• System Audio Settingsaudiocn · ReactTurn system audio capture on, set its level, watch its meter and explain what the browser will capture.
• Alphine Booking FormWatermelon UI · React
• Auth Foursv-efferd · SvelteA bordered auth layout with divider rails and a gentle email-first continuation flow.
• Waitlist JoinUI Lab · ReactDrops your face into a real queue and rolls out your place in line.
• System Prompt EditorLocalMode · ReactA controlled system-prompt editor (value in, onChange out) with quick-pick presets composed via the OptionList…
• Notification settingsFLX UI · ReactHorizontal field rows each toggled with a switch.
• Sign-up cardVelora UI · ReactCentered sign-up card over a grid and light beams, with live password rules, terms and social sign-up.
• Sign InSpaceUI · ReactA complete sign in page block using our space components and primitives.
• AI Content Creator Card v2D2Studio UI · ReactGlassmorphic AI content generator card with content type and tone pickers and a prompt field.
• Your Cart PageReactFrame · ReactA three-step eCommerce flow in one block: a cart with quantity steppers and promo code, a checkout form with an order…
• Login 03shadcn/ui · ReactA login page with a muted background color.
• Vanilla FormReact Spectrum · React
• Comp 121Origin UI · React
• Popover FormCult UI · ReactForm popover component with success states and animated transitions
• Notification preferences formReUI · ReactNotification preferences form
• auth-03Intent UI · Reactauth-03
• Multiple Step Form DemoSpectrum UI · Reactcomponent for the Multiple Step Form Demo
• Contact 01 - Project Inquiry Contact FormShadcn Space · ReactA conversion focused contact section with project inquiry form, contact details, and trust badges, ideal for agencies…
• Login FormOpenSourceUI · React
• Account And User Management 03Tremor Blocks · React
• Footer Fivecnblocks · SvelteFooter with newsletter signup and social links
• Cta Newsletter 03Oxbow UI · AstroCentered CTA for SaaS waitlist or newsletter
• LoginNexvyn UI · ReactLoginForm: labelled email and password fields, a password toggle, provider buttons and error state.
• Alphine Login FormWatermelon UI · React
• Auth Onesv-efferd · SvelteA centered auth entry screen with ambient particles and social sign-in actions.
• Passphrase GateLocalMode · ReactA controlled passphrase screen with create and unlock modes: create renders passphrase + confirmation with a…
• Payment formFLX UI · ReactName on card, card number with icon, expiry, CVC, and country select fields with a pay button.
• Newsletter sign-upVelora UI · ReactNewsletter card over a glowing dot grid with a labelled email field, subscriber avatars and a privacy note.
• Bento 01D2Studio UI · ReactBento grid for an education program platform with admin overview, faculty view and a program form.
• Login 04shadcn/ui · ReactA login page with form and image.
• Comp 122Origin UI · React
• Form with validation errorsReUI · ReactForm with validation errors
• Newsletter FooterSpectrum UI · ReactA newsletter panel with a value checklist, reader stack and inline validation.
• Dialog 10 - Sign InShadcn Space · ReactCompact sign in dialog with Google and GitHub buttons, email and password validation, a show password toggle, and a…
• Newsletter FormOpenSourceUI · React
• Account And User Management 04Tremor Blocks · React
• Forgot Password Onecnblocks · SvelteForgot password form with email input
• Sign In 01Oxbow UI · AstroSign in with magic link
• Login Email firstNexvyn UI · ReactA centered sign in page that leads with the email form, providers side by side below.
• Auth 01Watermelon UI · React
• Auth Threesv-efferd · SvelteA minimal single-column auth flow with brand header and stacked sign-in options.
• React Hook FormFLX UI · ReactDialog form with RHF, Zod resolver, and FieldError on invalid fields.
• Newsletter footerVelora UI · ReactFooter with a newsletter sign-up row, link columns and a live “All systems normal” status badge.
• FormD2Studio UI · ReactBuilding forms with React Hook Form and Zod.
• Login 05shadcn/ui · ReactA simple email-only login page.
• Comp 138Origin UI · React
• Field with input and textareaReUI · ReactField with input and textarea
• Transfer Funds CardSpectrum UI · ReactA money transfer form card with account pickers, a summary and a confirm action.
• Dialog 11 - Sign UpShadcn Space · ReactCompact sign up dialog with Google and GitHub buttons, a password strength meter, required terms checkbox, and…
• Signup FormOpenSourceUI · React
• Account And User Management 05Tremor Blocks · React
• Forgot Password Twocnblocks · SveltePassword reset form with side illustration
• Sign In 02Oxbow UI · AstroCentered sign in block
• Login TestimonialNexvyn UI · ReactThe split sign in page with a customer quote over the photo.
• Auth 02Watermelon UI · React
• Auth Twosv-efferd · SvelteA framed auth panel that combines email capture with side-by-side social login.
• TanStack FormFLX UI · ReactDialog form with TanStack Form and Zod onSubmit validation.
• Phone split heroVelora UI · ReactApp launch hero with an email capture on the left and an app screen in an iPhone frame.

Libraries with Tailwind CSS form components

• FLX UI
• Watermelon UI
• Tremor Blocks
• Origin UI
• Oxbow UI

Related categories

• Form Components
• React Form Components
• Svelte Form Components
• Animated Form Components
• shadcn/ui Form Components
• Tailwind CSS Input Components
• Tailwind CSS Text Input Components
• Tailwind CSS Select Components
• Tailwind CSS Form Field Components
• Tailwind CSS Textarea Components
• Tailwind CSS Checkbox Components
• Tailwind CSS Switch Components
• Tailwind CSS Slider Components
• Tailwind CSS Radio Components
• Tailwind CSS Combobox Components
• Tailwind CSS File Upload Components
• Tailwind CSS Search Input Components
• Tailwind CSS Date Picker Components
• Tailwind CSS Login Form Components
• Tailwind CSS Color Picker Components
• Tailwind CSS OTP Input Components