Input-group

A container component for grouping inputs and buttons together.

input-group

<div class="input-group">
  <input class="input-group__item input" placeholder="..." type="text" />
  <button class="input-group__item button">Submit</button>
</div>

input-group__item_grow

You can adjust the flex grow property on items using the following modifiers:

  • input-group__item_grow_lg
  • input-group__item_grow_sm
  • input-group__item_grow_none
<div class="input-group">
  <input class="input-group__item input-group__item_grow_lg input" placeholder="..." type="text" />
  <button class="input-group__item button button_color_primary">Submit</button>
</div>
<div class="input-group">
  <input class="input-group__item input" placeholder="..." type="text" />
  <button class="input-group__item input-group__item_grow_sm button button_color_primary">Submit</button>
</div>
<div class="input-group">
  <input class="input-group__item input" placeholder="..." type="text" />
  <button class="input-group__item input-group__item_grow_none button button_color_primary">Submit</button>
</div>

Examples

<div class="input-group">
  <input class="input-group__item input-group__item_grow_sm input" placeholder="Title" type="text" />
  <input class="input-group__item input" placeholder="First" type="text" />
  <input class="input-group__item input" placeholder="Last" type="text" />
  <button class="input-group__item input-group__item_grow_sm button button_color_primary">Submit</button>
</div>
<div class="input-group">
  <input class="input-group__item input" placeholder="Search" type="text" />
  <button class="input-group__item input-group__item_grow_none button button_icon button_color_primary">
    <svg role="img" class="icon">
      <use xlink:href="#search"></use>
    </svg>
  </button>
</div>