Dynamic form design - v0 by Vercel

Dynamic form design - v0 by VercelDynamic form design - v0 by Vercel

Design a ui for the request form in which the fields areResource Type which is the drop down input field and if resource type other is selected it should have add another input field which is input type textResource date input type date for which the resource is requiredStart from and end time for the resource requirement timeComments input type textarea

167d ago

I've created a comprehensive resource request form with all the requested fields:

Key Features:

Resource Type Dropdown: Includes common options like Meeting Room, Projector, Laptop, Vehicle, Equipment, and Other
Conditional Field: When "Other" is selected, an additional text input appears for custom resource specification
Resource Date: Date picker for when the resource is needed
Time Range: Separate start and end time inputs with responsive grid layout
Comments: Textarea for additional details and special requirements
Form Validation: Required fields are marked and validated
Responsive Design: Works well on both desktop and mobile devices

The form uses React state to manage the conditional display of the "Other" resource type field and handles form submission with all the collected data. The design is clean and professional using shadcn/ui components with proper spacing and accessibility features.

167d ago

after selecting start time and end time display the duration

167d ago

I've added duration calculation functionality to the form! Here's what was added:

New Features:

Duration Calculation: Automatically calculates the time difference between start and end times
Smart Formatting: Displays duration in hours and minutes (e.g., "2 hours 30 minutes", "45 minutes", "1 hour")
Cross-Day Support: Handles cases where the end time is the next day (e.g., start at 11:00 PM, end at 2:00 AM)
Visual Display: Shows the duration in a subtle, highlighted box below the time inputs
Conditional Display: Only appears when both start and end times are selected

The duration updates automatically whenever either the start time or end time changes, providing immediate feedback to users about how long they're requesting the resource.

167d ago

I've created a comprehensive resource request form with all the requested fields:

Key Features:

Resource Type Dropdown: Includes common options like Meeting Room, Projector, Laptop, Vehicle, Equipment, and Other
Conditional Field: When "Other" is selected, an additional text input appears for custom resource specification
Resource Date: Date picker for when the resource is needed
Time Range: Separate start and end time inputs with responsive grid layout
Comments: Textarea for additional details and special requirements
Form Validation: Required fields are marked and validated
Responsive Design: Works well on both desktop and mobile devices

167d ago

after selecting start time and end time display the duration

167d ago

I've added duration calculation functionality to the form! Here's what was added:

New Features:

Duration Calculation: Automatically calculates the time difference between start and end times
Smart Formatting: Displays duration in hours and minutes (e.g., "2 hours 30 minutes", "45 minutes", "1 hour")
Cross-Day Support: Handles cases where the end time is the next day (e.g., start at 11:00 PM, end at 2:00 AM)
Visual Display: Shows the duration in a subtle, highlighted box below the time inputs
Conditional Display: Only appears when both start and end times are selected

The duration updates automatically whenever either the start time or end time changes, providing immediate feedback to users about how long they're requesting the resource.

167d ago