DA
DREAMS ACHIVED

Multi Step Form - Copy this React, Tailwind Component to your project

Design-a-multi-step-form-component-using-Ant-Design(don't-add-any-validation-or-something-give-me-only-design)-for-HR-to-add-new-employees.-Each-step-should-dynamically-render-based-on-the-current-step-and-include-the-following-fields:-Step-1:-Phone-Verification-Fields:-Phone-number,-OTP-input.-Step-2:-Employee-Details-Fields:-Employee-photo-(upload),-fingerprint-photo-(upload),-name-(text),-gender-(radio),-date-of-birth-(date-picker),-blood-group-(radio),-marital-status-(radio).-Step-3:-Employee-Contact-Details-Fields:-Phone-number,-email,-permanent-address-(textarea),-current-address-(textarea).-Step-4:-Emergency-Contact-Details-Fields:-Contact-person’s-name-(text),-phone-(text),-email-(text),-relation-with-contact-person-(text).-Step-5:-Employment-Details-Fields:-Department-(dropdown),-designation-(dropdown),-date-of-joining-(date-picker),-employment-type-(dropdown:-full-time,-part-time,-contract,-intern),-reporting-manager-(dropdown).-Step-6:-Documents-Fields:-Aadhaar-number-(text),-PAN-card-number-(text),-Aadhaar-photo-(upload),-PAN-card-photo-(upload).-Step-7:-Bank-Account-Details-Fields:-Account-number-(text),-account-holder-name-(text),-bank-name-(text),-IFSC-code-(text).-Step-8:-Salary-Details-Fields:-Basic-pay-(number),-allowance-(number).

Prompt
Component Preview

About

MultiStepForm - A dynamic form for HR with phone verification, employee details, contact info, and salary fields, built with React and. Copy now for free!

Share

Last updated 1 month ago