# 输入组 InputGroup

分类：表单 · React：InputGroup

前后缀、内嵌按钮。整组是一个框，聚焦时整组边框变深一次。

## 示例
```html
<div class="xxd-input-group" style="width:100%;max-width:320px">
  <span class="xxd-input-group__addon">https://</span>
  <input aria-label="子域名" value="today">
  <span class="xxd-input-group__suffix">.xiaoxiaodong.ai</span>
  <button class="xxd-btn" data-variant="ghost" data-size="sm">检查</button>
</div>
```

## 属性与类名
- `data-size`：sm
- `aria-invalid`：出错
- 类名：`xxd-input-group` `xxd-input-group__addon` `xxd-input-group__suffix`

## 键盘与读屏
- 前后缀是纯文字说明，输入框仍需要自己的 label 或 aria-label
- 组里的按钮是独立的 Tab 停留点

## 规则
- 一个框只有一个框：前后缀在框里面，不是两个框拼起来