---
layout: docs
title: Input Group
description: null
---

## Example

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

### HTML

```html
<div class="input-group">
  <input type="text" />
  <button class="button" type="submit">...</button>
</div>
```

## Sizes

<form>
  <div class="field">
    <div class="input-group">
      <input class="input-xxl" type="text" placeholder="Input Group XXL">
      <button class="button button-xxl" type="submit">Submit</button>
    </div>
  </div>
  <div class="field">
    <div class="input-group">
      <input class="input-xl" type="text" placeholder="Input Group XL">
      <button class="button button-xl" type="submit">Submit</button>
    </div>
  </div>
  <div class="field">
    <div class="input-group">
      <input class="input-l" type="text" placeholder="Input Group L">
      <button class="button button-l" type="submit">Submit</button>
    </div>
  </div>
  <div class="field">
    <div class="input-group">
      <input type="text" placeholder="Input Group M">
      <button class="button" type="submit">Submit</button>
    </div>
  </div>
  <div class="field">
    <div class="input-group">
      <input class="input-s" type="text" placeholder="Input Group S">
      <button class="button button-s" type="submit">Submit</button>
    </div>
  </div>
  <div class="field">
    <div class="input-group">
      <input class="input-xs" type="text" placeholder="Input Group XS">
      <button class="button button-xs" type="submit">Submit</button>
    </div>
  </div>
  <div class="field">
    <div class="input-group">
      <input class="input-xxs" type="text" placeholder="Input Group XXS">
      <button class="button button-xxs" type="submit">Submit</button>
    </div>
  </div>
</form>

### HTML

```html
<div class="input-group">
  <input class="input-xxl" type="text" />
  <button class="button button-xxl" type="submit">...</button>
</div>

<div class="input-group">
  <input class="input-xl" type="text" />
  <button class="button button-xl" type="submit">...</button>
</div>

<div class="input-group">
  <input class="input-l" type="text" />
  <button class="button button-l" type="submit">...</button>
</div>

<div class="input-group">
  <input type="text" />
  <button class="button" type="submit">...</button>
</div>

<div class="input-group">
  <input class="input-s" type="text" />
  <button class="button button-s" type="submit">...</button>
</div>

<div class="input-group">
  <input class="input-xs" type="text" />
  <button class="button button-xs" type="submit">...</button>
</div>

<div class="input-group">
  <input class="input-xxs" type="text" />
  <button class="button button-xxs" type="submit">...</button>
</div>
```