Booking widget

Default booking widget

HTML


<div class="orc-c-booking-widget orc-js-booking-widget ">

  <h3 class="orc-c-booking-widget__top-heading">Book Your Stay</h3>

  <form method="GET" action="#" class="orc-c-form orc-c-form--booking orc-js-form">

    <div class="orc-c-form__body">

      <div class="orc-c-field orc-c-field--inline orc-c-field--date-range orc-c-field--transparent orc-js-field" data-date-picker data-date-picker-large-screen-width="585">

        <!-- date picker -->
        <span class="orc-c-field start-date orc-js-start-date">
        <label for="start-date" class="orc-c-field__label orc-u-is-vishidden">Start Date</label>
        <input type="date" class="orc-c-input orc-js-start-date" name="fromDate" id="start-date" placeholder="Select dates of stay" min="2017-03-15" max="2019-01-01"  />
    </span>

        <span class="orc-c-field end-date orc-js-vishidden">
        <label for="end-date" class="orc-c-field__label orc-u-is-vishidden">End Date</label>
        <input type="date" class="orc-c-input" name="toDate" id="end-date" placeholder="Select dates of stay" min="2017-03-16" max="2019-01-01"  />
    </span>

        <svg class="orc-c-icon orc-c-field__icon ">
        <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#rooms-suites"></use>
    </svg>
        <!-- end date picker -->

      </div>
      <!--end orc-c-field-->


      <div class="orc-c-field orc-c-field--small orc-c-field--counter orc-js-counter orc-u-margin-bottom">

        <label class="orc-c-field__label orc-u-is-vishidden" for="number-rooms">Rooms</label>

        <div class="orc-c-field__body" data-counter-text="Rooms">
          <button class="orc-c-btn orc-c-btn--small orc-c-btn--bare orc-c-field__btn-left orc-js-minus">

    <div class="orc-c-btn__inner">

        <svg class="orc-c-btn__icon ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#minus"></use>
        </svg>





    </div><!--end orc-c-btn__inner-->

</button>
          <!-- end orc-c-btn -->

          <input type="number" name="number-rooms" id="number-rooms" value="1" min="1" max="6" class="orc-c-input" readonly>
          <button class="orc-c-btn orc-c-btn--small orc-c-btn--bare orc-c-field__btn-right orc-js-plus">

    <div class="orc-c-btn__inner">

        <svg class="orc-c-btn__icon ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#plus"></use>
        </svg>





    </div><!--end orc-c-btn__inner-->

</button>
          <!-- end orc-c-btn -->

        </div>
        <!--end orc-c-field__body-->

      </div>
      <!--end orc-c-field-->

      <div class="orc-c-field orc-c-field--small orc-c-field--counter orc-js-counter">

        <label class="orc-c-field__label orc-u-is-vishidden" for="number-people">People</label>

        <div class="orc-c-field__body" data-counter-text="Adults">
          <button class="orc-c-btn orc-c-btn--small orc-c-btn--bare orc-c-field__btn-left orc-js-minus">

    <div class="orc-c-btn__inner">

        <svg class="orc-c-btn__icon ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#minus"></use>
        </svg>





    </div><!--end orc-c-btn__inner-->

</button>
          <!-- end orc-c-btn -->

          <input type="number" name="number-people" id="number-people" value="2" min="1" max="6" class="orc-c-input" readonly>
          <button class="orc-c-btn orc-c-btn--small orc-c-btn--bare orc-c-field__btn-right orc-js-plus">

    <div class="orc-c-btn__inner">

        <svg class="orc-c-btn__icon ">
            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..&#x2F;..&#x2F;orchid-icons.svg#plus"></use>
        </svg>





    </div><!--end orc-c-btn__inner-->

</button>
          <!-- end orc-c-btn -->

        </div>
        <!--end orc-c-field__body-->

      </div>
      <!--end orc-c-field-->


    </div>
    <!--end orc-c-form__body-->

    <div class="orc-c-form__footer">

      <div class="orc-c-btn-group orc-c-btn-group--vertical">

        <button class="orc-c-btn orc-c-btn--white">

    <div class="orc-c-btn__inner">


            <span class="orc-c-btn__text orc-js-btn-text">Check Availability</span>




    </div><!--end orc-c-btn__inner-->

</button>
        <!-- end orc-c-btn -->





      </div>
      <!--end orc-c-btn-group-->



    </div>
    <!--end orc-c-form__footer-->

  </form>
  <!--end orc-c-form-->

</div>
<!--end orc-c-booking-widget-->

When to use

Use the booking widget to enable users to book overnight accommodations.

When to consider an alternative

This component is strictly for booking rooms. Other reservation types are handled through third-party sites like Ticketmaster, OpenTable, and SevenRooms.

Class Name	Description
`orc-c-booking-widget` Required	Apply to the booking widget’s containing HTML element. This class applies the background color, text color, and the general size of the booking widget.
`orc-js-booking-widget` JS	Add to the `orc-c-booking-widget` element so that JavaScript can trigger this element. This is helpful for when the active state needs toggled on and off.
`orc-c-booking-widget__top-heading` Required	The title at the top of the booking widget
`orc-c-form` Required	Applied to the `<form>` element within the booking widget. This `form` element will help allow the data in the fields to be submitted.
`orc-c-form--booking` Required	Applied to the `<form>` element within the booking widget. This allows elements within this `form` to be styled differently because it is strictly for booking.
`orc-js-form` JS	Applied to the `<form>` element so that JavaScript can target this form.
`orc-c-form___body` Required	Inner container of the `orc-c-form`.
`orc-c-field` Required	Form field within the `orc-c-form`. Apply `orc-c-field--inline` and `orc-c-field--transparent` as modifiers to get the correct styles for the date picker container within the booking widget. Add the `orc-js-field` class as well as `data-date-picker` and `data-date-picker-large-screen-width="585"` to get the proper JS functionality with the date picker. For more in-depth details on the date picker, go to the date range component.
`orc-c-field--counter` Required	Form field within the `orc-c-form` that wraps a button, input, and another button to allow the user to increase or decrease the value within the counter. This needs `orc-js-counter` to be applied so that JavaScript can be applied to this element. For more information about this component, go to the counter component.
`orc-c-btn-group` Required	Button group containing the button to submit the booking form in the booking widget.

Default booking widget `orc-c-booking-widget`

Usage

When to use

When to consider an alternative