输入组 Input group

输入组可以在文本输入框两侧挂上文字、按钮或下拉菜单,把「前缀 / 后缀 / 操作」和输入框融为一体,常用于用户名、金额、搜索等场景。

基础

用 input-group 包裹输入框,input-group-text 作为前缀或后缀;前缀、后缀可以同时出现,也可以两侧各放一个。

@
@example.com
¥ .00
HTML 示例

按钮附加

在输入组里直接放 button 即成为输入框的一部分;本例点击「搜索」会读取输入框内容并在下方显示结果。

尚未搜索。

HTML 示例

多输入拼接

一个输入组里可以并排放多个 <input>,视觉上连成一体;注意校验样式只对单输入框的输入组生效。

姓名
HTML 示例

校验样式

在输入框上加 is-valid / is-invalid,输入组会自动继承对应颜色;配合 valid-feedback / invalid-feedback 给出提示。

https:// .com
网址格式正确。
邮箱
邮箱地址不完整,缺少域名部分。
HTML 示例