InputGroup

基础表单

基于 Bootstrap 5 的输入组组件，将文本附加元素、按钮、下拉菜单、复选框/单选按钮等与表单控件组合为一个整体，支持前后缀与多个附加元素、多个输入框、按钮与下拉菜单附加、分割按钮、自定义下拉与文件选择、换行、尺寸及校验状态，并配套 InputGroupText、InputGroupCheckbox、InputGroupRadio 子组件

Component Demo

Basic usage and examples of the InputGroup component

基础用法

.00

$.00

换行

长文本附加元素另一个很长的附加元素文本

添加 flex-wrap 类后，超长内容会在输入组内部换行而不是溢出

尺寸

小型

默认

大型

复选框和单选按钮

多个输入框

姓与名

多个附加元素

$0.00

按钮附加元素

带下拉菜单的按钮

分割按钮

自定义表单

选项

浏览

校验状态

请填写用户名。

使用 hasValidation 属性后，FormFeedback 会相对整个输入组定位

交互演示

请输入关键词后再搜索

API Documentation

Complete API reference for the InputGroup component

Props

InputGroup

属性名	类型	默认值	描述
`as`	`ElementType`	`'div'`	渲染的根元素类型，默认渲染 `div`，可传入其他元素或自定义组件
`children`	`ReactNode`	-	输入组内容，通常为 `InputGroupText`、`FormControl`、`Button`、`DropdownButton` 等
`className`	`string`	-	自定义类名
`hasValidation`	`boolean`	`false`	是否应用 `has-validation` 类，为输入组中的校验反馈（`is-invalid` 与 `invalid-feedback`）预留定位
`size`	`InputGroupSize`	-	输入组尺寸，可选 `sm` 或 `lg`，统一控制组内表单控件与附加元素的尺寸（`input-group-sm`、`input-group-lg`）
`...rest`	`HTMLAttributes<HTMLDivElement>`	-	根元素的所有原生属性（如 `id`、`aria-label` 等）

InputGroupText

属性名	类型	默认值	描述
`as`	`ElementType`	`'span'`	渲染的根元素类型，默认为 `span`，可传入 `label`、`div` 等
`children`	`ReactNode`	-	附加元素内容，如 `@`、`$`、`.00` 等文本或图标
`className`	`string`	-	自定义类名
`htmlFor`	`string`	-	原生 `label` 的 `htmlFor` 属性，配合 `as="label"` 将附加元素与表单控件关联
`...rest`	`HTMLAttributes<HTMLElement>`	-	根元素的所有原生属性（如 `id`、`aria-label` 等）

InputGroupCheckbox

属性名	类型	默认值	描述
`className`	`string`	-	自定义类名，应用于内部的 `form-check-input` 元素
`...rest`	`InputHTMLAttributes<HTMLInputElement>`	-	原生 `input` 元素的所有属性（如 `defaultChecked`、`onChange`、`aria-label` 等）；组件自动包裹在 `input-group-text` 中并设置 `type` 为 `checkbox`

InputGroupRadio

属性名	类型	默认值	描述
`className`	`string`	-	自定义类名，应用于内部的 `form-check-input` 元素
`...rest`	`InputHTMLAttributes<HTMLInputElement>`	-	原生 `input` 元素的所有属性（如 `defaultChecked`、`name`、`onChange`、`aria-label` 等）；组件自动包裹在 `input-group-text` 中并设置 `type` 为 `radio`

Type Definitions

InputGroupProps

输入组组件属性接口

export interface InputGroupProps extends HTMLAttributes<HTMLDivElement> {
  as?: ElementType;
  children?: ReactNode;
  className?: string;
  hasValidation?: boolean;
  size?: InputGroupSize;
}

InputGroupSize

输入组尺寸类型

export type InputGroupSize = 'lg' | 'sm';

InputGroupTextProps

输入组文本组件属性接口

export interface InputGroupTextProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  children?: ReactNode;
  className?: string;
  htmlFor?: string;
}

InputGroupCheckboxProps

输入组复选框组件属性接口

export interface InputGroupCheckboxProps extends Omit<
  InputHTMLAttributes<HTMLInputElement>,
  'type'
> {
  className?: string;
}

InputGroupRadioProps

输入组单选框组件属性接口

export interface InputGroupRadioProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'type'> {
  className?: string;
}