Booking Form

Complete booking creation and editing form

SaaSBooking

Overview

BookingForm provides a full-featured booking form supporting create, edit, and view modes. It includes title, description, time slot, resource, timezone, and attendee fields with built-in validation.

Usage

import { BookingForm } from "@leanicon/web-builder-library/saas";

<BookingForm
  mode="create"
  resources={[
    { id: "room-1", name: "Conference Room A" },
    { id: "room-2", name: "Conference Room B" },
  ]}
  availableUsers={[
    { userId: "1", name: "John Doe", email: "[email protected]" },
    { userId: "2", name: "Jane Smith", email: "[email protected]" },
  ]}
  onSubmit={(values) => console.log("Submitted:", values)}
  onCancel={() => console.log("Cancelled")}
/>;

Variants

Create Mode

Create Mode (Dark)

Edit Mode

View Mode

Loading

With Error

With Max Attendees

Props

Name	Type	Default	Required	Description
`mode`	`enum`	`create`	No	Form mode
`values`	`Partial<BookingFormData>`	—	No	Initial/current values
`loading`	`boolean`	`false`	No	Whether form is in loading state
`error`	`string`	—	No	Error message to display
`resources`	`{ id: string; name: string; }[]`	—	Yes	Available resources for selection
`availableUsers`	`UserOption[]`	`[]`	No	Available users for attendee selection
`initialAttendees`	`AttendeeData[]`	`[]`	No	Initial attendees (for edit mode)
`maxAttendees`	`number`	—	No	Maximum number of attendees allowed
`className`	`string`	—	No	Custom class name
`onSubmit`	`(values: BookingFormData) => void \| Promise<void>`	—	Yes	Called when form is submitted with valid data
`onCancel`	`() => void`	—	Yes	Called when cancel is clicked
`onValidationChange`	`((isValid: boolean, errors: ValidationErrors) => void)`	—	No	Called when validation state changes
`onChange`	`((values: Partial<BookingFormData>, fieldName: string) => void)`	—	No	Called when any field value changes
`onSearchAttendees`	`((query: string) => UserOption[] \| Promise<UserOption[]>)`	—	No	Called when searching for attendees (for async user search)