React Bootstrap logoReact Bootstrap

FloatingLabel

基础表单

基于 Bootstrap 5 的浮动标签组件，将标签浮动在输入框上方以节省空间，支持输入框、文本域、下拉选择框、禁用与只读纯文本状态、输入组组合、校验状态及网格布局

Component Demo

Basic usage and examples of the FloatingLabel component

基础用法

将 FormControl 与 label 包裹在 FloatingLabel 中即可启用浮动标签，注意输入框需要提供 placeholder

默认值

输入框已有值时，标签会自动保持浮起状态

文本域

通过 FormControl 的 as 属性渲染文本域；自定义高度时建议使用 style 而不是 rows 属性

下拉选择框

除 FormControl 外，浮动标签仅支持 FormSelect；与输入框不同，下拉选择框的标签始终保持浮起状态

禁用状态

禁用的控件呈灰色外观且不可交互

只读纯文本

浮动标签同样支持 form-control-plaintext 只读纯文本样式

输入组

@
@
请选择一个用户名。

将 FloatingLabel 放在 InputGroup 内部即可组合使用；同时使用校验反馈时，需要为输入组添加 hasValidation 属性

校验状态

看起来不错！
请输入有效的邮箱地址。

通过 isValid / isInvalid 属性应用校验样式，浮动标签同样会适配边框颜色

网格布局

与 Bootstrap 网格系统配合使用时，将表单元素放置在列（col-*）类中

交互演示

输入内容后标签会自动浮起

API Documentation

Complete API reference for the FloatingLabel component

Props

属性名类型默认值描述
asElementType'div'渲染的根元素类型，默认渲染 `div`，可传入其他元素或自定义组件
childrenReactNode-浮动标签内容，通常为 `FormControl` 或 `FormSelect` 表单控件
classNamestring-自定义类名
controlIdstring-表单控件的 `id`，同时用于内部 `label` 的 `htmlFor` 关联
labelReactNode-浮动标签文本，渲染在表单控件之后的 `label` 元素中
...restHTMLAttributes<HTMLElement>-根元素的所有原生属性（如 `id`、`style` 等）

Type Definitions

FloatingLabelProps

浮动标签组件属性接口

export interface FloatingLabelProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  children?: ReactNode;
  className?: string;
  controlId?: string;
  label: ReactNode;
}