Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Input Group

Usage notes

Input groups are to display a composite pattern for buttons and text fields.

Button before


        <div class="coral-InputGroup" role="presentation">
          <span class="coral-InputGroup-button">
            <button is="coral-button" icon="selectBox" aria-label="Select" title="Select"></button>
          </span>
          <input is="coral-textfield" class="coral-InputGroup-input" aria-label="input">
        </div>

Button after

Toggle markup


        <div class="coral-InputGroup" role="presentation">
          <input is="coral-textfield" class="coral-InputGroup-input" aria-label="input">
          <span class="coral-InputGroup-button">
            <button is="coral-button" icon="selectBox" aria-label="Select" title="Select"></button>
          </span>
        </div>

Icon Buttons on both sides

Toggle markup


        <div class="coral-InputGroup" role="presentation">
          <span class="coral-InputGroup-button">
            <button is="coral-button" icon="remove" aria-label="Remove" title="Remove"></button>
          </span>
          <input is="coral-textfield" class="coral-InputGroup-input" aria-label="input">
          <span class="coral-InputGroup-button">
            <button is="coral-button" icon="add" aria-label="Add" title="Add"></button>
          </span>
        </div>

Text Buttons on both side

Toggle markup


        <div class="coral-InputGroup" role="presentation">
          <span class="coral-InputGroup-button">
            <button is="coral-button">Go!</button>
          </span>
          <input is="coral-textfield" class="coral-InputGroup-input" aria-label="input">
          <span class="coral-InputGroup-button">
            <button is="coral-button">Go!</button>
          </span>
        </div>

Block with Button before

Toggle markup


        <div class="coral-InputGroup coral-InputGroup--block" style="width: 300px;" role="presentation">
          <span class="coral-InputGroup-button">
            <button is="coral-button" icon="selectBox" aria-label="Select" title="Select"></button>
          </span>
          <input is="coral-textfield" class="coral-InputGroup-input" aria-label="input">
        </div>

Block with Button after

Toggle markup


        <div class="coral-InputGroup coral-InputGroup--block" style="width: 300px;" role="presentation">
          <input is="coral-textfield" class="coral-InputGroup-input" aria-label="input">
          <span class="coral-InputGroup-button">
            <button is="coral-button" icon="selectBox" aria-label="Select" title="Select"></button>
          </span>
        </div>

Block with text Buttons and both sides

Toggle markup


        <div class="coral-InputGroup coral-InputGroup--block" style="width: 300px;" role="presentation">
          <span class="coral-InputGroup-button">
            <button is="coral-button">Go!</button>
          </span>
          <input is="coral-textfield" class="coral-InputGroup-input" aria-label="input">
          <span class="coral-InputGroup-button">
            <button is="coral-button">Go!</button>
          </span>
        </div>

Block with Icons Buttons on both sides

Toggle markup


        <div class="coral-InputGroup coral-InputGroup--block" style="width: 300px;" role="presentation">
          <span class="coral-InputGroup-button">
            <button is="coral-button" icon="remove" aria-label="Remove" title="Remove"></button>
          </span>
          <input is="coral-textfield" class="coral-InputGroup-input" aria-label="input">
          <span class="coral-InputGroup-button">
            <button is="coral-button" icon="add" aria-label="Add" title="Add"></button>
          </span>
        </div>