1. Components
  2. Form controls

Room preference form

A stylized series of radio buttons for selecting room preferences.

Default room preference form orc-c-form orc-c-form--room

A stylized series of radio buttons for selecting room preferences.

  • 

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

  <input type="hidden" name="_token" value="">

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

    <div class="orc-c-field orc-c-field--toggle  orc-js-field">

      <h4 class="orc-c-field__label">Bed type</h4>

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

        <div class="orc-c-toggle orc-js-toggle">

          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-bed-king" name="room-bed" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-bed-king">
                King
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-bed-two-queen" name="room-bed" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-bed-two-queen">
                2 Queens
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-bed-no-preference" name="room-bed" title="The Cosmopolitan Las Vegas" value="" checked />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-bed-no-preference">
                No preference
            </label>

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

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


    </div>
    <!-- end orc-c-field -->
    <!--room bed preference-->

    <div class="orc-c-field orc-c-field--toggle  orc-js-field">

      <h4 class="orc-c-field__label">Wheelchair accessibile</h4>

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

        <div class="orc-c-toggle orc-js-toggle">

          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-accessibility-1" name="room-accessibility" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-accessibility-1">
                Yes
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-accessibility-2" name="room-accessibility" title="The Cosmopolitan Las Vegas" value="" checked />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-accessibility-2">
                No
            </label>

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

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


    </div>
    <!-- end orc-c-field -->
    <!--room accesibility preference-->

    <div class="orc-c-field orc-c-field--toggle  orc-js-field">

      <h4 class="orc-c-field__label">Smoking Room</h4>

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

        <div class="orc-c-toggle orc-js-toggle">

          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-smoking-1" name="room-smoking" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-smoking-1">
                Yes
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-smoking-2" name="room-smoking" title="The Cosmopolitan Las Vegas" value="" checked />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-smoking-2">
                No
            </label>

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

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


    </div>
    <!-- end orc-c-field -->
    <!--room smoking preference-->

    <div class="orc-c-field orc-c-field--toggle  orc-js-field">

      <h4 class="orc-c-field__label">Preferred tower</h4>

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

        <div class="orc-c-toggle orc-js-toggle">

          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-tower-chelsea" name="room-tower" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-tower-chelsea">
                Chelsea
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-tower-boulevard" name="room-tower" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-tower-boulevard">
                Boulevard
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-tower-no-preference" name="room-tower" title="The Cosmopolitan Las Vegas" value="" checked />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-tower-no-preference">
                No preference
            </label>

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

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


    </div>
    <!-- end orc-c-field -->
    <!--room tower preference-->

    <div class="orc-c-field orc-c-field--toggle  orc-js-field">

      <h4 class="orc-c-field__label">Room energy</h4>

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

        <div class="orc-c-toggle orc-js-toggle">

          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-energy-quiet" name="room-energy" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-energy-quiet">
                Quiet
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-energy-party" name="room-energy" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-energy-party">
                Party
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-energy-none" name="room-energy" title="The Cosmopolitan Las Vegas" value="" checked />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-energy-none">
                No Preference
            </label>

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

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


    </div>
    <!-- end orc-c-field -->
    <!--room energy preference-->

    <div class="orc-c-field orc-c-field--toggle  orc-js-field">

      <h4 class="orc-c-field__label">Floor</h4>

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

        <div class="orc-c-toggle orc-js-toggle">

          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-floor-high" name="room-floor" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-floor-high">
                High floor
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-floor-low" name="room-floor" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-floor-low">
                Low floor
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-floor-4" name="room-floor" title="The Cosmopolitan Las Vegas" value="" checked />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-floor-4">
                No preference
            </label>

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

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


    </div>
    <!-- end orc-c-field -->
    <!--room floor preference-->

    <div class="orc-c-field orc-c-field--toggle  orc-js-field">

      <h4 class="orc-c-field__label">Elevator</h4>

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

        <div class="orc-c-toggle orc-js-toggle">

          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-location-near" name="room-location" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-location-near">
                Near elevator
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-location-far" name="room-location" title="The Cosmopolitan Las Vegas" value="" />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-location-far">
                Far from elevator
            </label>
          <input class="orc-c-toggle__input orc-js-toggle-input orc-u-is-vishidden" type="radio" id="room-location-7" name="room-location" title="The Cosmopolitan Las Vegas" value="" checked />
          <label class="orc-c-toggle__label orc-js-toggle-label" for="room-location-7">
                No Preference
            </label>

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

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


    </div>
    <!-- end orc-c-field -->
    <!--room location preference-->

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

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

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

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

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


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




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

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


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

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


            <span class="orc-c-btn__text orc-js-btn-text">Button</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-->

Usage

When to use

Use this component in a user’s settings or on their profile page to set preferences for their perfect room.

When to consider an alternative

The core component of this form is a toggle. Use a toggle, or for a less stylized approach, a radio field, in cases that aren’t specific to setting room preferences.

Class Name Description 
orc-c-form
Required

Applied to the outer <form> element. This form element will help allow the data in the fields to be submitted. An input with a type of hidden and a name of _token needs to be added within this form as the first element for submission reasons.

 
orc-c-form--room
Required

Applied to the outer <form> element in addition to orc-c-form to add the proper styling to this room preference form.

 
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. Consists of a field label, field body, and input in most cases. In the room preference form, there are toggle fields.

 
orc-js-field
JS

Class added to orc-c-field to have JavaScript target this element, mainly for form field validation

 
orc-c-field__label
Required

Form field label used to describe the input within the field

 
orc-c-field__body
Required

Form field container that houses the input and other form field content.

 
orc-c-input
Required

Form field input. Inputs can be of various types. The contact form has types of “text”.

 
orc-c-toggle
Required

A field consisting of a radio buttons that are styled as selectable blocks so a user can choose one of these block choices. For more in-depth details on the toggle, go to the toggle component.

 
orc-c-form__footer
Required

The bottom portion of the form that houses items like the button group

 
orc-c-btn-group
Required

Button group containing the buttons to submit the contact form or any other actions needed within the form.