logoOutUI

⌘ K
  • 指南
  • 组件
  • 工具类
  • 其他
v5.3.x
  • 组件总览
  • 通用
    • Color 色彩
    • Icon 图标
    • Button 按钮
    • Text 文本
    • Link 链接
    • Typography 排版
  • 布局
    • Grid 栅格
    • Layout 布局
    • Stack 堆栈
  • 表单
    • Input 输入框
    • Select 选择器
    • Radio 单选框
    • Checkbox 复选框
    • Input group 输入组
    • Float label 浮动标签
    • ColorPicker 颜色选择器
    • Slider 滑块
    • Switch 开关
    • Upload 文件上传
    • Form 表单
  • 导航
    • Affix 固钉
    • Breadcrumb 面包屑
    • Dropdown 下拉菜单
    • NavBar 导航栏
    • NavMenu 导航菜单
    • Tabs 标签页
    • Pagination 分页
  • 数据
    • Table 表格
    • Tag 标签
    • Progress 进度条
    • Badge 徽章
    • Avatar 头像
最后更新时间:
Checkbox 复选框Float label 浮动标签
Copyright © 2021-present 粤ICP备2021136339号
‌
‌
‌
‌

Input group 输入组

通过在input、select的任一侧添加文本、按钮或按钮组,扩展表单控件

基础用法

在输入框的任一侧放置一个附加组件或按钮,或者在输入的两侧放置,如果有<label>,则必须放在输入组之外。

包装(Wrapping)

默认情况下,输入组通过flex-wrap: wrap进行包装,以便在输入组中容纳自定义表单字段验证。您可以使用.flex-nowrap禁用此功能。

尺寸(Sizing)

给输入组添加.input-group样式,其中的内容将自动调整大小,无需在每个元素上重复表设置。

复选框和单选按钮

多个输入框

虽然视觉上支持多个<input>,但验证样式仅适用于具有单个<input>的输入组。

多个插件

按钮插件

带下拉列表的按钮

分段按钮

自定义 select

输入组包括对自定义选择和自定义文件输入的支持。不支持这些浏览器的默认版本。

自定义 file input