1. Components
  2. Form controls

Expanding value pair

Create additional paired fields.

Expanding value pair orc-c-expanding-value-pair

Create additional paired fields.

  • 
    
    <div class="orc-c-expanding-value-pair  orc-js-value-pair">
    
      <div class="orc-c-expanding-value-pair__body orc-js-value-pair-body">
        <div class="orc-c-field orc-u-margin-right orc-js-field">
    
          <label for="" class="orc-c-field__label">Social Network</label>
    
          <div class="orc-c-field__body">
    
            <select class="orc-c-select" id="" name="" placeholder="Placeholder">
    
        <option value="option-1" >Option 1</option>
        <option value="option-2" >Option 2</option>
    
    
    </select>
            <!--end orc-c-select-->
    
    
          </div>
          <!-- end orc-c-field__body -->
    
    
        </div>
        <!-- end orc-c-field -->
    
        <div class="orc-c-field orc-c-field--small orc-u-margin-right-small orc-js-field">
    
          <label for="" class="orc-c-field__label ">Label</label>
    
          <div class="orc-c-field__body">
    
            <input type="" id="" class="orc-c-input " name="" placeholder="Placeholder" value="" title="The Cosmopolitan Las Vegas" />
    
          </div>
          <!-- end orc-c-field__body -->
    
    
        </div>
        <!-- end orc-c-field -->
    
      </div>
      <!--end orc-c-expanding-value-pair__body-->
    
      <button class="orc-c-btn orc-js-value-pair-trigger">
    
        <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>
    
                <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-expanding-value-pair-->

Usage

When to use

This allows the user to add and label an additional value, useful on profiles and user settings.

When to consider an alternative

To allow the user to input lengthier text in response to a specific question, use a text field or textarea field.

Class Name Description
orc-c-expanding-value-pair
Required

Apply to the expanding value pair containing HTML element. This helps with customizing the styling of the elements within this component.

orc-js-value-pair
JS

Add to the orc-c-expanding-value-pair element so that JavaScript can target this element and add functionality.

orc-c-expanding-value-pair__body
Required

Container of the orc-c-field elements in the orc-c-expanding-value-pair.

orc-c-field
Required

Form field within the orc-c-expanding-value-pair__body. Consists of a field label, field body, and input in most cases. This can contain text inputs as well as select inputs.

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

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 select or text input of the expanding value pair

orc-c-btn
Required

Button within the expanding value pair that allows a user to add an additional set of fields.

orc-js-value-pair-trigger
JS

Required for JavaScript to create new rows of fields. This will also add an additional button next to the form fields that can remove a row until there is one row left.