# salla-booking-field (https://docs.salla.dev/twilight/react/web-components/salla-booking-field)



{/* Generated by scripts/sync-web-components.mjs from the components docs.json. Do not edit by hand. */}

Form field for a booking (appointment) product option. It shows the booking price, a button that opens the booking
calendar in a modal, and the reservations already chosen. Used inside `salla-product-options`, which renders it
for booking options on the cart page; a theme rarely places it directly.

The button asks the API for a booking page with `salla.booking.add(productId, false)`, and guests are sent to the
login popup first. The chosen reservations are stored as a JSON string in a hidden input named after `option.name`,
which is marked required when `option.required` is true. After a booking is saved in the modal, the page reloads.

## Use it [#use-it]

In HTML or JSX, use the tag `<salla-booking-field>` with the **Attribute** names below. In React, the wrapper takes the **Property** names (camelCase).

```tsx
import { SallaBookingField } from '@salla.sa/twilight-components-react/booking-field';
```

**Client-only.** On the server this wrapper renders a placeholder (a skeleton, or nothing), and the real component mounts in the browser. Do not rely on it for content that search engines must see.

## Example [#example]

```tsx
import { SallaBookingField } from '@salla.sa/twilight-components-react/booking-field';

export function Example() {
  return (
    <SallaBookingField
      productId={123}
      option={{ id: 1, name: 'option[1]', required: true, price: 50, details: [] }}
    />
  );
}
```

```ts
const field = document.createElement('salla-booking-field');
field.productId = 123;
field.option = { id: 1, name: 'option[1]', required: true, price: 50, details: [] };
document.body.appendChild(field);
```

## Properties [#properties]

| Property    | Attribute    | Description                                                                                                                                                                                                                                                                                                         | Type     | Default |
| ----------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | ------- |
| `option`    | `option`     | The booking option configuration. Uses `name` (name of the hidden input), `required`, `price` (shown with the store currency) and `details` (the existing reservations, each `{ date, day, from_timestamp?, to_timestamp? }`). It is only read when the component loads, so set it before the element is connected. | `Option` |         |
| `productId` | `product-id` | The ID of the product for which the booking is being made. Used to request the booking page and to ignore booking events that belong to other products.                                                                                                                                                             | `number` |         |

## Events [#events]

Listen with `addEventListener`, or the `on` prop of the React wrapper (for example `onModalBack`).

| Event          | Description                                                                                                                                                                                 | Detail |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ |
| `invalidInput` | Event emitted when the hidden input fails validation, for example when the option is required and no appointment is booked yet. `event.detail` is the native `invalid` event of that input. | `any`  |

## Related [#related]

Renders: [`<salla-modal>`](https://docs.salla.dev/twilight/react/web-components/salla-modal), [`<salla-button>`](https://docs.salla.dev/twilight/react/web-components/salla-button).

Used inside: [`<salla-product-options>`](https://docs.salla.dev/twilight/react/web-components/salla-product-options).