I want to build a step form like this with schadcn
I'll create a multi-step employee form based on your design. This will include all the steps shown in your images with proper form controls, validation, and step navigation.
I've created a comprehensive multi-step employee form that matches your design. Here are the key features:
Step Navigation:
- Visual step indicator with completed/current/pending states
- Purple accent color matching your design
- Smooth navigation between steps
Step 1 - Basic Info:
- Profile photo upload area with avatar
- Form fields for personal information
- Phone number validation indicator
- Responsive grid layout
Step 2 - Role & Assignment:
- Role and city selection dropdowns
- Multi-select fields with count badges
- Remove functionality for selected items
Step 3 - Attendance & Commission:
- Date picker for start date
- Commission rate input
- Quota bonus slider with range display
- Toggle switches for geofencing and attendance tracking
Step 4 - Review & Submit:
- Summary of all entered information
- Final submission step
The form uses shadcn/ui components and maintains state across all steps. You can easily extend it by adding validation, API integration, or additional form fields.
I use react hook form with zod valiadation please update the code to be aligned with this
I'll update the code to use React Hook Form with Zod validation. This will provide robust form validation and better form state management.
I've completely updated the form to use React Hook Form with Zod validation. Here are the key improvements:
Zod Validation Schemas:
- Separate schemas for each step with specific validation rules
- Combined schema for the entire form
- Proper type inference with TypeScript
React Hook Form Integration:
useFormhook withzodResolverfor validationFormFieldcomponents for proper form control- Real-time validation with
mode: "onChange" - Step-by-step validation before navigation
Key Features:
- Step Validation: Each step is validated before allowing navigation to the next
- Error Display: Proper error messages for each field using
FormMessage - Type Safety: Full TypeScript support with inferred types
- Real-time Validation: Immediate feedback as users type
- Form State Management: Centralized form state with React Hook Form
Validation Rules:
- Email format validation
- Phone number pattern validation
- Required field validation
- Number range validation for commission rates
- Array length validation for assignments
- Confirmation checkbox for final submission
Enhanced UX:
- Visual validation indicators (green checkmark for valid phone)
- Disabled navigation when validation fails
- Comprehensive error messaging
- Form submission only when all steps are valid
The form now provides robust validation while maintaining the same beautiful UI design from your original mockup.