Form Components

Dev Design Library indexes 369 form components from 54 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. Form components belong to the Inputs group.

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

• Login 01shadcn/ui · ReactA simple login form.
• Form ControlMUI / Material UI · React
• FieldsetChakra UI · ReactA set of form controls optionally grouped under a common name.
• 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
• FieldsetArk UI · ReactA set of form controls optionally grouped under a common name.
• Advanced clean login form cardReUI · ReactAdvanced clean login form card
• Formpdfcn · ReactForm PDF component (forme)
• QuestionAI Elements · ReactA composable prompt for collecting choices, freeform text, or both from a user.
• FieldsetPark UI · ReactA grouping component for organizing related form fields.
• FormLobe UI · ReactBase UI-powered Form with settings-style groups, fields and submit footer.
• 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.
• Contact sectionArc Library · ReactA validated contact form that morphs into a confirmation, support channels, and office cards with local times.
• 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 CardROI UI · ReactA login card component with email/password fields and social login options.
• 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.
• Agent Setup PatternHalaska UI · React
• Contact FormPin UI · React
• FormSpaceUI · ReactManages form inputs, checks for validation errors, and handles form submission to ensure a smooth data entry experience.
• Aria QuestionnaireReScript shadcn · ReScript
• Payment ReminderZAYX · React Native
• 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.
• Form GroupMUI / Material UI · React
• 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
• Medical Intake Formpdfcn · ReactMedical Intake Form PDF block (forme)
• Form ModalLobe UI · ReactFormModal combines Form and Modal components to create a modal dialog with an integrated form. It provides a…
• 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.
• Centered loginArc Library · ReactA passkey-first login card on a quiet ring backdrop that morphs through email and code.
• 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…
• FieldsetROI UI · ReactA native fieldset element with an easily stylable legend.
• 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.
• Form DialogHalaska UI · React
• Sign InSpaceUI · ReactA complete sign in page block using our space components and primitives.
• Base QuestionnaireReScript shadcn · ReScript
• Quick PayZAYX · React Native
• 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
• Formpdfcn · ReactForm PDF component (takumi)
• Form KitLobe UI · React
• 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.
• Newsletter signupArc Library · ReactAn email signup framed by a stack of past issues; subscribing drops the next issue, addressed to you, onto the front.
• Passphrase GateLocalMode · ReactA controlled passphrase screen with create and unlock modes: create renders passphrase + confirmation with a…
• FormROI UI · ReactA form component for handling user input.
• 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
• Medical Intake Formpdfcn · ReactMedical Intake Form PDF block (takumi)
• Base Ui FormLobe UI · React

Libraries with form components

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

Related categories

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