PCCW Global Sky Framework

Input groups

Input groups allow input fields to be seamlessly combined inline with extensions like buttons, dropdowns or text, which can be placed in either side of the input field and are styled accordingly.

Input group component
Input group extensions
Input group styling
Input group validation states
Responsive input groups

Input group component

To define an input group, wrap an input field and an extension inside an input-group container.

Code output

HTML Markup

Copy<div class="input-group">
  <input type="text" placeholder="Input field">
  <div class="input-extension">
    <div class="dropdown">
      <button class="btn btn-main btn-dropdown-toggle" data-toggle="dropdown">Dropdown</button>
      <ul class="dropdown-menu">
        <li><a href=#>Option 1</a></li>
        <li><a href=#>Option 2</a></li>
        <li><a href=#>Option 3</a></li>
        <li><a href=#>Option 4</a></li>
      </ul>
    </div>
  </div>
</div>

Input group extensions

When using input groups, an input field can be combined with a button, a dropdown or text as shown below.

Code output

Extension text

Extension text clear

HTML Markup

Copy<div class="input-group">
  <input type="text" placeholder="Input field">
  <div class="input-extension">
    <button class="btn btn-main">Button</button>
  </div>
</div>

<div class="input-group">
  <input type="text" placeholder="Input field">
  <div class="input-extension">
    <div class="dropdown">
      <button class="btn btn-main btn-dropdown-toggle" data-toggle="dropdown">Dropdown</button>
      <ul class="dropdown-menu">
        <li><a href=#>Option 1</a></li>
        <li><a href=#>Option 2</a></li>
        <li><a href=#>Option 3</a></li>
        <li><a href=#>Option 4</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="input-group">
  <input type="text" placeholder="Input field">
  <div class="input-extension">
    <span class="input-block">Extension text</span>
  </div>
</div>

<div class="input-group">
  <input type="text" placeholder="Input field">
  <div class="input-extension">
    <span>Extension text clear</span>
  </div>
</div>

Input group styling

Input groups can be styled with the use of predefined classes. Keep in mind that some variations might require changes to markup

Input group extension order

Input group extensions can be reordered to be placed either on the left or the right side of an input field simply by switching code placement in the markup.

Code output

HTML Markup

Copy<div class="input-group">
  <input type="text" placeholder="Input field">
  <div class="input-extension">
    <button class="btn btn-main">Button</button>
  </div>
</div>

<div class="input-group">
  <div class="input-extension">
    <button class="btn btn-main">Button</button>
  </div>
  <input type="text" placeholder="Input field">
</div>

Input group button styling

Button styling defined in the button section of this framework can be applied on buttons contained within input groups.

Code output

HTML Markup

Copy<div class="input-group">
  <input type="text" placeholder="Input field">
  <div class="input-extension">
    <button class="btn btn-sec">Button</button>
  </div>
</div>

Input group sizes

Different size classes are available for the input groups by applying a class input-group-{affix}, where affix can be either lg, sm or xs. The class names are semantic, are irrelevant to the responsive resolution tiers and override any input field and button size classes within the input group.

Code output

HTML markup

Copy <div class="input-group input-group-lg">
  <input type="text" placeholder="Large input field">
  <div class="input-extension">
    <div class="dropdown">
      <button class="btn btn-main btn-dropdown-toggle" data-toggle="dropdown">Large dropdown</button>
      <ul class="dropdown-menu">
        <li><a href=#>Option 1</a></li>
        <li><a href=#>Option 2</a></li>
        <li><a href=#>Option 3</a></li>
        <li><a href=#>Option 4</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="input-group">
  <input type="text" placeholder="Normal input field">
  <div class="input-extension">
    <div class="dropdown">
      <button class="btn btn-main btn-dropdown-toggle" data-toggle="dropdown">Normal dropdown</button>
      <ul class="dropdown-menu">
        <li><a href=#>Option 1</a></li>
        <li><a href=#>Option 2</a></li>
        <li><a href=#>Option 3</a></li>
        <li><a href=#>Option 4</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="input-group input-group-sm">
  <input type="text"placeholder="Small input field">
  <div class="input-extension">
    <div class="dropdown">
      <button class="btn btn-main btn-dropdown-toggle" data-toggle="dropdown">Small dropdown</button>
      <ul class="dropdown-menu">
        <li><a href=#>Option 1</a></li>
        <li><a href=#>Option 2</a></li>
        <li><a href=#>Option 3</a></li>
        <li><a href=#>Option 4</a></li>
      </ul>
    </div>
  </div>
</div>

<div class="input-group input-group-xs">
  <input type="text" placeholder="Extra small input field">
  <div class="input-extension">
    <div class="dropdown">
      <button class="btn btn-main btn-dropdown-toggle" data-toggle="dropdown">Extra small dropdown</button>
      <ul class="dropdown-menu">
        <li><a href=#>Option 1</a></li>
        <li><a href=#>Option 2</a></li>
        <li><a href=#>Option 3</a></li>
        <li><a href=#>Option 4</a></li>
      </ul>
    </div>
  </div>
</div>

Input group validation states

Validation classes can be applied on input fields contained within input groups. Along with the static styling, hover and focus styling change accordingly. The validation classes are applied directly on the input fields instead of the input group component to simplify the validation development proccess.

Code output

HTML Markup

Copy<div class="input-group">
  <input type="text" class="form-control-success" placeholder="Input field">
  <div class="input-extension">
    <button class="btn btn-main">Button</button>
  </div>
</div>

<div class="input-group">
  <input type="text" class="form-control-error" placeholder="Input field">
  <div class="input-extension">
    <button class="btn btn-main">Button</button>
  </div>
</div>

Responsive input groups

Responsive classes can be applied on input groups to allow stacking of its contents at specified resolution tiers.

The input group responsive classes are defined as input-group-{affix}-stacked where affix is one of the 6 responsive tier affixes xxs, xs, sm, md, lg, xl and result to input group content stacking at that specific resolution tier. Keep in mind that the input-field will either stack at the top or the bottom of the stack depending on its placement within the input group.

Unlike most responsive classes, responsive input group classes are only applied at the resolution tier defined by the affix and are not carried over to higher resolution tiers.

In the following example, both input groups are stacked at the two extra small resolution tiers, but in the first input group, the input field stacks at the top, while in the second input group it stacks at the bottom due to its placement within the input group.

Code output

HTML Markup

Copy<div class="input-group input-group-xxs-stacked input-group-xs-stacked">
  <input type="text" placeholder="Input field">
  <div class="input-extension">
    <button class="btn btn-sec">Button</button>
  </div>
</div>

<div class="input-group input-group-xxs-stacked input-group-xs-stacked">
  <div class="input-extension">
    <button class="btn btn-sec">Button</button>
  </div>
  <input type="text" placeholder="Input field">
</div>