I'll recreate this multi-step form UI using Next.js and Radix UI components.
This implementation recreates the multi-step form UI from your image using Next.js and Radix UI components. Here's what I've included:
- A progress indicator at the top showing the three steps (Details, Documents, and a completion step)
The form fields exactly as shown in the image:
- Company name (pre-filled with "Green Wave Technology")
- Contact person (pre-filled with "Alex Jones")
- Mobile number (empty field)
- Email address (empty field)
Two action buttons at the bottom:
- "Save as Draft" in light purple
- "Document Verification" in darker purple with an arrow icon
- Navigation buttons (X and arrow) at the bottom corners
The UI is fully responsive and matches the color scheme from the image with purple accents. I've used Radix UI primitives for the form components and styled everything with Tailwind CSS.
To use this in your project, you'll need to install the required dependencies:
- @radix-ui/react-label
- lucide-react
- class-variance-authority
- tailwindcss-animate
You're right, my implementation doesn't match your screenshot exactly. Let me fix that with a focus on the floating label behavior for the input fields and the exact styling from your image.
Now I've created a much more accurate implementation that matches your screenshot:
Key Improvements:
Floating Label Input Component:
- When you click on an input field, the label floats up to the top
- A placeholder appears when the field is focused
- Empty fields have a light gray background, filled fields have a white background
- The component handles focus and blur states properly
Styling Matches:
- The progress indicator now has the labels below the circles
- The spacing between elements matches the screenshot
- The form fields have the exact same appearance as in your image
- The buttons at the bottom have the correct styling and positioning
Behavior:
- The first two fields are pre-filled with "Green Wave Technology" and "Alex Jones"
- Empty fields have the gray background as shown in your screenshot
- When you focus on an empty field, the label moves up and a placeholder appears
This implementation uses Radix UI primitives for the base components and adds a custom FloatingLabelInput component to achieve the exact behavior you wanted. The styling is done with Tailwind CSS to match the design in your screenshot.