# nylas-booking-form

Source: https://developer.nylas.com/docs/reference/ui/booking-form/

The `nylas-booking-form` component is a UI component that allows users to book an event.

The booking form component.

## Overview

- **Tag**: `<nylas-booking-form>`
- **Encapsulation**: shadow

## Installation

### HTML / Web Component

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@nylas/web-elements/dist/cdn/nylas-web-elements/nylas-web-elements.esm.js"></script>
```

### React

```bash
npm install @nylas/react
```

## Usage

### HTML

```html
<nylas-booking-form></nylas-booking-form>
```

### React

```jsx
import { NylasBookingForm } from '@nylas/react';

export default function Example() {
  return <NylasBookingForm />;
}
```

## Props

| Property | Attribute | Type | Default | Required | Description |
| --- | --- | --- | --- | --- | --- |
| `bookingInfo` | `booking-info` | undefined \| { primaryParticipant: NylasSchedulerBookingParticipant; startTime?: Date \| undefined; endTime?: Date \| undefined; timezone?: string \| undefined; language?: string \| undefined; guests?: NylasSchedulerBookingParticipant[] \| undefined; additionalFields?: Record<string, { value: string; type?: string \| undefined; readOnly?: boolean \| undefined; }> \| undefined; } | - | No | The booking info. |
| `configSettings` | `config-settings` | any | - | No | The config settings for the scheduler. |
| `eventInfo` | `event-info` | undefined \| { booking_id: string; organizer: { email: string; name: string; is_organizer?: boolean \| undefined; }; title: string; description: string; status: string; event_id: string; location: string; booking_ref: string; } | - | No | The booked event (Used to track if a booking is created in an eventOverride). |
| `isLoading` | `is-loading` | boolean \| undefined | - | No | The loading state. |
| `selectedLanguage` | `selected-language` | LANGUAGE_CODE.de \| LANGUAGE_CODE.en \| LANGUAGE_CODE.es \| LANGUAGE_CODE.fr \| LANGUAGE_CODE.ja \| LANGUAGE_CODE.ko \| LANGUAGE_CODE.nl \| LANGUAGE_CODE.sv \| LANGUAGE_CODE.zh \| undefined | - | No | The selected language. |
| `selectedTimeslot` | `selected-timeslot` | undefined \| { start_time: Date; end_time: Date; emails?: string[] \| undefined; capacity?: number \| undefined; event_id?: string \| undefined; master_id?: string \| undefined; calendar_id?: string \| undefined; } | - | No | The selected time. |
| `themeConfig` | `theme-config` | any | - | No | The theme configuration. |

## Events

| Event | Detail | Description |
| --- | --- | --- |
| `backButtonClicked` | boolean | This event is fired when the cancel button is clicked. |
| `bookingFormError` | { id?: string \| undefined; type?: NotificationType \| undefined; title?: string \| undefined; code?: number \| undefined; category?: string \| undefined; description?: string \| undefined; ttl?: number \| "none" \| undefined; } | This event is fired when an error occurs in the booking form validation. |
| `bookingFormSubmitted` | void | This event is fired immediately after the book button is clicked. The booking form validation is not complete at this point. |
| `detailsConfirmed` | Omit<NylasSchedulerBookingData, "additionalFields"> & { additionalFields?: Record<string, string> \| undefined; location?: string \| undefined; booking_ref?: string \| undefined; } | This event is fired when the book button is clicked and the form validation is complete and successful. This event is fired before the booking request is sent. |
| `emailChanged` | string | This event is fired when the email is changed. |
| `nameChanged` | string | This event is fired when the name is changed. |

## CSS shadow parts

| Part | Description |
| --- | --- |
| `nbf` | The booking form host. |
| `nbf__button-ghost` | The ghost button. |
| `nbf__button-outline` | The outline button. |
| `nbf__button-primary` | The primary button. |
| `nbf__checkbox-component` | The checkbox component. |
| `nbf__date-component` |  |
| `nbf__dropdown` | The dropdown component. |
| `nbf__dropdown-button` | The dropdown button. |
| `nbf__dropdown-content` | The dropdown content. |
| `nbf__input-textfield` | The input textfield. |
| `nbf__input-wrapper` | The input wrapper. |
| `nbf__radio-button-group` | The radio button group. |
| `nbf__textarea-component` | The textarea component. |

## Dependencies

This component uses the following child components:

- [`<input-component>`](/docs/reference/ui/input-component/)
- [`<button-component>`](/docs/reference/ui/button-component/)
- [`<close-icon>`](/docs/reference/ui/close-icon/)
- [`<add-circle-icon>`](/docs/reference/ui/add-circle-icon/)
- [`<select-dropdown>`](/docs/reference/ui/select-dropdown/)
- [`<checkbox-component>`](/docs/reference/ui/checkbox-component/)
- [`<radio-button-group>`](/docs/reference/ui/radio-button-group/)
- [`<textarea-component>`](/docs/reference/ui/textarea-component/)
- [`<nylas-date-component>`](/docs/reference/ui/date-component/)
- [`<multi-select-dropdown>`](/docs/reference/ui/multi-select-dropdown/)

## Used by

This component is used inside:

- [`<nylas-scheduling>`](/docs/reference/ui/scheduling/)