Form

基础表单

基于 Bootstrap 5 的表单组合组件，提供 Form 表单容器与 FormGroup 分组，配合 FormLabel、FormControl、FormCheck、FormSelect、FormFeedback、FloatingLabel 等组件快速搭建表单，支持 validated 原生约束校验、controlId 自动关联标签与控件、栅格化水平布局、浮动标签与整体禁用

Component Demo

Basic usage and examples of the Form component

基础用法

自动关联

FormGroup 的 controlId 会通过 Context 自动作为 FormLabel / FormCheckLabel 的 htmlFor 与 FormControl / FormCheckInput 的 id，显式设置的 id / htmlFor 优先

表单校验

validated 属性为表单添加 was-validated 类，提交或输入后按原生约束校验显示有效/无效样式与 FormFeedback 反馈

栅格布局

将 FormGroup 的 as 设为 Row，配合 FormLabel 的 column 属性与 Col 即可构建水平布局表单

浮动标签

整体禁用

使用原生 fieldset 的 disabled 属性可一次性禁用组内所有控件

交互演示

API Documentation

Complete API reference for the Form component

Props

Common Props

属性名	类型	默认值	描述
`className`	`string`	-	自定义类名
`validated`	`boolean`	`false`	是否应用 `was-validated` 类以启用浏览器原生约束校验的视觉反馈，通常配合 `required`、`minLength` 等原生校验属性与 `noValidate` 使用
`...rest`	`FormHTMLAttributes<HTMLFormElement>`	-	表单元素的所有原生属性（如 `onSubmit`、`action`、`method`、`noValidate` 等）

FormGroup

属性名	类型	默认值	描述
`as`	`ElementType`	`'div'`	渲染的根元素类型，可传入 `Row` 等以复用栅格布局
`children`	`ReactNode`	-	分组内的控件与标签内容
`className`	`string`	-	自定义类名
`controlId`	`string`	-	分组内控件的关联 id，通过 Context 自动作为 `FormLabel` / `FormCheckLabel` 的 `htmlFor` 与 `FormControl` / `FormCheckInput` 的 `id`，子控件显式设置的 id / htmlFor 优先
`...rest`	`HTMLAttributes<HTMLElement>`	-	根元素的所有原生属性（如 `style`、`aria-*` 等）

Type Definitions

FormContextValue

表单分组上下文值类型

export interface FormContextValue {
  controlId?: string;
}

FormGroupProps

表单分组组件属性接口

export interface FormGroupProps extends HTMLAttributes<HTMLElement> {
  as?: ElementType;
  controlId?: string;
}

FormProps

表单组件属性接口

export interface FormProps extends FormHTMLAttributes<HTMLFormElement> {
  validated?: boolean;
}