New This website is new, your feedback will help us to improve it.

Input group

Overview

All input groups should have a label to make sure they can be understood by assistive technologies.

Supported elements

Input groups are designed for textual form inputs only. Other elements may be used, but are not supported and may not look right.

Inputs groups should be nested within other components such as form group or grid columns, not mixed together.

Tooltips and Popovers used within input groups require extra styling, such as the example below, to avoid side effects, and may not otherwise look right:

Variants

Basic input group

Use the .bsk-input-group class with the .bsk-input-group-addon class to place text/icons, buttons, and even other form elements, before or a after a control in a form field.

£
000
£ 000 
<!-- Input group addon before a form control -->
<div>
  <label for="input-1" class="block ml-8">Amount (GBP)</label>
  <div class="bsk-input-group">
      <span class="bsk-input-group-addon">£</span>
      <input 
          id="input-1"
          type="number"
          placeholder="(GBP)"
          class="border px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
  </div>
</div>

<!-- Input group addon after a form control -->
<div>
  <label for="input-1" class="block ml-8">Amount (thousands)</label>
  <div class="bsk-input-group">
      <input 
          id="input-1"
          type="number"
          placeholder="(thousands)"
          class="border px-2 py-1 ml-6 focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      <span class="bsk-input-group-addon">000</span>
  </div>
</div>

<!-- Input group addon before and after a form control -->
<div>
  <label for="input-1" class="block ml-8">Amount (GBP in thousands)</label>
  <div class="bsk-input-group">
      <span class="bsk-input-group-addon">£</span>
      <input 
          id="input-1"
          type="number"
          placeholder="(GBP in thousands)"
          class="border px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
      <span class="bsk-input-group-addon">000</span>
  </div>
</div>

Icons can be used as well.

<div>
  <label for="input-1" class="block ml-10">Username</label>
  <div class="bsk-input-group">
      <span class="bsk-input-group-addon"><i class="fas fa-user" aria-hidden="true"></i></span>
      <input 
          id="input-1"
          type="number"
          placeholder="Username"
          class="border px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
  </div>
</div>

Checkbox and radio input group

Radio options and checkboxes can be used instead of text.

£
£ 
<!-- Input group addon with checkbox control -->
<div>
  <label for="input-1" class="block">Amount (GBP)</label>
  <div class="bsk-input-group">
      <span class="bsk-input-group-addon">
          <input class="mr-1" type="checkbox" aria-label="checkbox"> £
      </span>
      <input 
          id="input-1"
          type="number"
          placeholder="(GBP)"
          class="border px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
  </div>
</div>

<!-- Input group addon with checkbox control -->
<div>
  <label for="input-1" class="block">Amount (GBP)</label>
  <div class="bsk-input-group">
      <span class="bsk-input-group-addon">
          <input class="mr-1" type="radio" aria-label="radio"> £
      </span>
      <input 
          id="input-1"
          type="number"
          placeholder="(GBP)"
          class="border px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500"
      />
  </div>
</div>

Sizing

Addon before
Addon before
Addon before
Addon before 
<form>
  <fieldset>
      <label for="form-addon-example-1" class="block">Extra large text input</label>
      <div class="bsk-input-group">
          <span class="bsk-input-group-addon">Addon before</span>
          <input class="border px-2 py-1 text-2xl focus:outline-none focus:ring-2 focus:ring-blue-500" id="form-addon-example-1">
      </div>
  </fieldset>
  <fieldset>
      <label for="form-addon-example-2" class="block">Large text input</label>
      <div class="bsk-input-group">
          <span class="bsk-input-group-addon">Addon before</span>
          <input class="border px-2 py-1 text-xl focus:outline-none focus:ring-2 focus:ring-blue-500" id="form-addon-example-2">
      </div>
  </fieldset>
  <fieldset>
         <label for="form-addon-example-3" class="block">Default text input</label>
          <div class="bsk-input-group">
              <span class="bsk-input-group-addon">Addon before</span>
             <input class="border px-2 py-1 focus:outline-none focus:ring-2 focus:ring-blue-500" id="form-addon-example-3">
          </div>
  </fieldset>
  <fieldset>
         <label for="form-addon-example-4" class="block">Small text input</label>
          <div class="bsk-input-group">
              <span class="bsk-input-group-addon">Addon before</span>
              <input class="border px-2 py-1 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" id="form-addon-example-4">
          </div>
  </fieldset>
</form>