shadcn/ui Form Components

Dev Design Library indexes 135 shadcn/ui form components from 15 open-source UI libraries, with the most coming from FLX UI, Watermelon UI, Shadcn Space, Velora UI and Spectrum UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. They follow the shadcn/ui conventions, so most install with the shadcn CLI and drop into a Tailwind project. Form components belong to the Inputs group.

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

• auth-01Intent UI · Reactauth-01
• Multiple Step Form DemoSpectrum UI · Reactcomponent for the Multiple Step Form Demo
• FormVengeance UI · React
• Ask User QuestionsFluid Functionalism · ReactStepped question flow with numbered options, keyboard shortcuts (1–9), single or multi-select, inline 'other' text…
• 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…
• Drawer Buttonsuselayouts · ReactTwo buttons that open side drawers with a 3D fold. Payment comes from the right, cart from the left, and the fields…
• FormObsidianUI · React
• Microphone Setupaudiocn · ReactChoose and check a microphone: device select with a live preview, a level meter, gain, mute and a level check that…
• Alphine Booking FormWatermelon UI · React
• QuestionnaireHextaUI · ReactA step-by-step form that moves between questions with a sense of direction, shows real progress and answers from the…
• 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.
• FieldOUI · ReactShadcn Field with react aria components characteristics.
• AI Content Creator CardD2Studio UI · ReactPro version content creation card
• auth-02Intent UI · Reactauth-02
• Newsletter FooterSpectrum UI · ReactA newsletter panel with a value checklist, reader stack and inline validation.
• Checkbox-06 - Checkbox with formShadcn Space · ReactCheckbox component
• Multi Step Formuselayouts · ReactA dynamic, animated multi-step form with validation.
• System Audio Settingsaudiocn · ReactTurn system audio capture on, set its level, watch its meter and explain what the browser will capture.
• Alphine Login FormWatermelon UI · React
• 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.
• AI Content Creator Card v2D2Studio UI · ReactGlassmorphic AI content generator card with content type and tone pickers and a prompt field.
• auth-03Intent UI · Reactauth-03
• Waitlist FooterSpectrum UI · ReactWaitlist capture with an avatar stack and a live position counter.
• Contact 01 - Project Inquiry Contact FormShadcn Space · ReactA conversion focused contact section with project inquiry form, contact details, and trust badges, ideal for agencies…
• Auth 01Watermelon UI · React
• 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.
• Dialog 10 - Sign InShadcn Space · ReactCompact sign in dialog with Google and GitHub buttons, email and password validation, a show password toggle, and a…
• Auth 02Watermelon UI · React
• 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.
• Dialog 11 - Sign UpShadcn Space · ReactCompact sign up dialog with Google and GitHub buttons, a password strength meter, required terms checkbox, and…
• Auth 03Watermelon UI · React
• 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.
• Field 01 - Sign In FormShadcn Space · ReactA sign in form built with the Field primitive, featuring an email field with inline validation, a password field with…
• Auth 04Watermelon UI · React
• Plan OverviewFLX UI · ReactPlan Overview for Manage Subscription.
• Forms 01 - Edit Profile FormShadcn Space · ReactA user-friendly profile editing form with avatar upload, personal details, privacy controls, and action toggles…
• Auth 05Watermelon UI · React
• Change PlanFLX UI · ReactChange Plan for Manage Subscription.
• Topbar 03 - Login Action TopbarShadcn Space · ReactNavigation topbar with primary links, login action, notifications, and user profile for quick access. Ideal for SaaS…
• Auth 06Watermelon UI · React
• Cancel FlowFLX UI · ReactCancel Flow for Manage Subscription.
• Contact 1Watermelon UI · React
• Channel MatrixFLX UI · ReactChannel Matrix for Notifications.
• Contact 2Watermelon UI · React
• Grouped TogglesFLX UI · ReactGrouped Toggles for Notifications.
• Contact 3Watermelon UI · React
• Digest FrequencyFLX UI · ReactDigest Frequency for Notifications.
• Contact 4Watermelon UI · React
• Card FormFLX UI · ReactCard Form for Payment.
• Contact 5Watermelon UI · React
• Saved MethodsFLX UI · ReactSaved Methods for Payment.
• Contact 6Watermelon UI · React
• Express WalletsFLX UI · ReactExpress Wallets for Payment.
• Contact 7Watermelon UI · React
• Notification settingsFLX UI · ReactSwitches with labels and descriptions inside the popover.
• Family WalletWatermelon UI · React
• Email LinkFLX UI · ReactEmail Link for Reset Password.
• Form 1Watermelon UI · React
• OTP CodeFLX UI · ReactOTP Code for Reset Password.
• Form 10Watermelon UI · React
• Security QuestionsFLX UI · ReactSecurity Questions for Reset Password.
• Form 2Watermelon UI · React
• Dynamic Field ArrayFLX UI · ReactStart from an empty state, then add and remove teammate rows with per-item validation.
• Form 3Watermelon UI · React
• Form in a DialogFLX UI · ReactBuild an invoice while a dialog validates each line item against its own schema.
• Form 4Watermelon UI · React
• Text InputFLX UI · ReactNative text and email inputs bound with register and Zod validation.
• Form 5Watermelon UI · React
• TextareaFLX UI · ReactMulti-line textarea with a description and length-constrained Zod rule.
• Form 6Watermelon UI · React
• SliderFLX UI · ReactNumeric slider bound via Controller, validated against a Zod range.
• Form 7Watermelon UI · React
• Checkbox GroupFLX UI · ReactMultiple checkboxes collected into a string array with a min-selection rule.
• Form 8Watermelon UI · React
• Toggle GroupFLX UI · ReactSingle-select toggle group bound via Controller with Zod validation.
• Form 9Watermelon UI · React
• SelectFLX UI · ReactGrouped select with labelled option groups bound via Controller.
• Newsletter 1Watermelon UI · React
• CommandFLX UI · ReactSearchable combobox using Command inside a Popover, bound via Controller.
• Newsletter 2Watermelon UI · React
• DropdownFLX UI · ReactSingle choice via a dropdown menu radio group bound through Controller.
• Newsletter 3Watermelon UI · React
• Contact FormFLX UI · ReactName, email, topic and message validated on submit.
• Newsletter 4Watermelon UI · React
• Create AccountFLX UI · ReactSign up with name, email, a strong password and terms.
• Newsletter 5Watermelon UI · React
• Sign InFLX UI · ReactEmail and password validated on submit.
• NewsletterFLX UI · ReactSubscribe with an email and a delivery frequency.
• Password ConfirmationFLX UI · ReactPick a strong password and confirm it matches.
• Email AddressFLX UI · ReactValidate an email address with instant feedback.
• Number RangeFLX UI · ReactKeep a numeric input within a sensible range.
• Character LimitFLX UI · ReactCap text length with a live character counter.
• Tabbed SectionsFLX UI · ReactTabbed Sections for Settings.
• Sidebar LayoutFLX UI · ReactSidebar Layout for Settings.
• Inline EditFLX UI · ReactInline Edit for Settings.
• Preferences DialogFLX UI · ReactPreferences Dialog for Settings.
• Social FirstFLX UI · ReactSocial First for Sign In.
• Email & PasswordFLX UI · ReactEmail & Password for Sign In.
• Magic LinkFLX UI · ReactMagic Link for Sign In.
• PasskeyFLX UI · ReactPasskey for Sign In.
• Phone & OTPFLX UI · ReactPhone & OTP for Sign In.
• Split ScreenFLX UI · ReactSplit Screen for Sign In.
• Dynamic Field ArrayFLX UI · ReactStart from an empty state, then add and remove teammate rows with per-item validation.
• Form in a DialogFLX UI · ReactBuild an invoice while a dialog validates each line item against its own schema.
• Text InputFLX UI · ReactNative text and email inputs wired with form.Field and Zod validation.
• TextareaFLX UI · ReactMulti-line textarea with a description and length-constrained Zod rule.
• SliderFLX UI · ReactNumeric slider wired with form.Field, validated against a Zod range.
• Checkbox GroupFLX UI · ReactMultiple checkboxes collected into a string array with a min-selection rule.
• Toggle GroupFLX UI · ReactSingle-select toggle group wired with form.Field and Zod validation.
• SelectFLX UI · ReactGrouped select with labelled option groups wired with form.Field.
• CommandFLX UI · ReactSearchable combobox using Command inside a Popover, wired with form.Field.
• DropdownFLX UI · ReactSingle choice via a dropdown menu radio group wired with form.Field.
• Contact FormFLX UI · ReactName, email, topic and message validated on submit.

Libraries with shadcn/ui form components

• FLX UI
• Watermelon UI
• Shadcn Space
• Velora UI
• Spectrum UI

Related categories

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