Counter

Default counter

HTML


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

  <label class="orc-c-field__label " for="number-rooms">Label</label>

  <div class="orc-c-field__body">
    <button class="orc-c-btn orc-c-field__btn-left orc-c-btn--bare orc-js-minus" title="subtract button">

    <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="3" min="1" max="6" class="orc-c-input">
    <button class="orc-c-btn orc-c-field__btn-right orc-c-btn--bare orc-js-plus" title="add button">

    <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-->

When to use

This is the simple way for users to indicate a number of something: tickets needed, rooms being booked, number of adults or children.

When to consider an alternative

The counter is excellent for display on homepage, offerings pages, and other high-priority pages. On more administrative pages like form submissions, a select field is better for managing amounts.

Class Name	Description
`orc-c-field` Required	Form field within the `orc-c-form`. Consists of a field label, field body, and input in most cases.
`orc-c-field--counter` Modifier	Add to `orc-c-field` to provide the proper styling for a counter
`orc-c-field--small` Modifier	Add to `orc-c-field` to shrink the height of the field
`orc-c-field__label` Required	Word or short phrase applied to an `<label>` element that labels the contents of the `orc-c-field__body`
`orc-c-field__body` Required	Form field container that houses the buttons and input of the counter
`orc-c-field__body` Required	Form field container that houses the buttons and input of the counter
`orc-c-btn` Required	The button component is used for the minus and plus buttons of the counter. These are also used with `orc-c-field__btn-left`, `orc-c-field__btn-right`, and `orc-c-btn--bare` classes to position and style these buttons correctly
`orc-js-minus` JS	Add to the minus button to get JavaScript to target this element for proper functionality
`orc-js-plus` JS	Add to the plus button to get JavaScript to target this element for proper functionality
`orc-c-input` Required	The input where the number value is stored. The `type` attribute of this input needs to be set to `number` and `max` and `min` attributes can be added to set parameters.

Default counter `orc-c-field orc-c-field--counter`

Usage

When to use

When to consider an alternative