Expanding value pair

Expanding value pair

HTML


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

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.

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

Usage

When to use

When to consider an alternative