Form Components Demo

Modern forms built with React Hook Form, Zod validation, and Shadcn/ui components

Contact Form Demo

Contact Us

Send us a message and we'll respond as soon as possible.

0/1000

Features:

  • ✓ Real-time validation with Zod
  • ✓ Accessible form fields
  • ✓ Loading states and error handling
  • ✓ Character count display
  • ✓ Responsive design

Transport Form Demo

New Transport Log

Enter the details for a new oil transport operation.

Customer Details

Date when the transport occurred

Transport Details

Unique identifier for this shipment

Quantity & Pricing

Number of oil barrels transported

$

Price per barrel in USD

Total Value:$0.00

Any additional information about this transport

0/500

Features:

  • ✓ Complex form with multiple field types
  • ✓ Currency formatting and calculation
  • ✓ Date validation (no future dates)
  • ✓ Dynamic total calculation
  • ✓ Select components with options
  • ✓ Conditional validation rules
  • ✓ Section organization

Technical Implementation

Form Validation

  • • Zod schemas for type-safe validation
  • • React Hook Form for form state management
  • • @hookform/resolvers for Zod integration
  • • Real-time and blur validation modes
  • • Custom validation rules and error messages

UI Components

  • • Shadcn/ui components for consistency
  • • Reusable field components with TypeScript
  • • Accessible form labels and descriptions
  • • Loading states and error displays
  • • Responsive design patterns

Data Management

  • • React Query for server state
  • • Optimistic updates for better UX
  • • Automatic cache invalidation
  • • Error handling and retry logic
  • • TypeScript for type safety

Form Utilities

  • • Currency formatting helpers
  • • Date validation utilities
  • • Form submission handlers
  • • Error message formatting
  • • Development debug tools

Forms implemented with modern React patterns, full TypeScript support, and comprehensive validation.

Built for the CdA-PTY oil transport logging system.