# Input group

- order: 9

输入框组合



---

````html
<h4>带标签的输入框</h4>
<div class="ant-input-group">
  <span class="ant-input-group-addon" id="basic-addon1">Http://</span>
  <input type="text" class="ant-input" placeholder="Username">
</div>
<br>
<div class="ant-input-group">
  <input type="text" class="ant-input" placeholder="Username">
  <span class="ant-input-group-addon" id="basic-addon1">.com</span>
</div>
<br>
<div class="ant-input-group">
  <span class="ant-input-group-addon" id="basic-addon1">Http://</span>
  <input type="text" class="ant-input" placeholder="Username">
  <span class="ant-input-group-addon" id="basic-addon1">.com</span>
</div>

<h4>作为额外元素的按钮式下拉菜单</h4>
<div class="ant-input-group">
  <input type="text" class="ant-input" placeholder="Search for...">
  <div class="ant-input-group-btn">
    <button class="input-btn" type="button">
      <span>.com</span>
      <i class="anticon anticon-down"></i>
    </button>
  </div>
</div>

<h4>带按钮的菜单</h4>
<div class="ant-input-group">
  <input type="text" class="ant-input" placeholder="Search for...">
  <div class="ant-input-group-btn">
    <button class="input-btn" type="button">Go!</button>
  </div>
</div>

<h4>微调输入框</h4>
<div class="ant-input-group">
  <input type="text" class="ant-input" placeholder="请输入数字">
  <div class="ant-input-group-btn-vertical">
    <button class="input-btn" type="button">  
      <i class="anticon anticon-up"></i>
    </button>
    <button class="input-btn" type="button">  
      <i class="anticon anticon-down"></i>
    </button>
  </div>
</div>
````