Form

Forms 57

About

Booking Form Description: A compact and visually polished form for handling travel or accommodation bookings. It features distinct sections for destination, dates, rooms, and guests, with smooth animations powered by Framer Motion. The component is fully responsive and adapts to both light and dark themes using shadcn/ui variables.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Form to your project and fits it to your theme.

Code

How Form is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import React, { useState } from 'react';
import { BookingForm } from '@/components/ui/form'; // Adjust path as needed

export default function BookingFormDemo() {
  const [destination, setDestination] = useState('Bali, Indonesia');

  // Placeholder handlers for demonstration purposes
  const handleDateRangeClick = () => {
    alert('Date range selector opened!');
  };

  const handleRoomsClick = () => {
    alert('Room selector opened!');
  };

  const handleGuestsClick = () => {
    alert('Guest selector opened!');
  };

  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    alert('Checking availability...');
  };

  return (
    <div className="flex h-screen w-full items-center justify-center bg-background p-4">
      <BookingForm
        destination={destination}
        dateRange="8 May - 9 May"
        rooms={2}
        guests={4}
        onDestinationChange={(e) => setDestination(e.target.value)}
        onDateRangeClick={handleDateRangeClick}
        onRoomsClick={handleRoomsClick}
        onGuestsClick={handleGuestsClick}
        onSubmit={handleSubmit}
      />
    </div>
  );
}