FormSelect

基础表单

基于 Bootstrap 5 的下拉选择框组件，为原生 select 元素提供自定义外观，支持大/小尺寸、多选、可见选项数量、禁用状态及有效/无效校验状态

Component Demo

Basic usage and examples of the FormSelect component

基础用法

尺寸

多选

添加 multiple 属性后，可按住 Ctrl（Windows）或 Cmd（macOS）键选择多个选项

可见选项数量

通过 htmlSize 属性控制下拉框在不展开时可见的选项数量

禁用状态

禁用的下拉选择框呈灰色外观且不可交互

校验状态

看起来不错！

请选择一个选项。

通过 isValid / isInvalid 属性应用 is-valid / is-invalid 校验样式，配合 FormFeedback 提供有效/无效反馈文本

交互演示

你选择了：typescript

API Documentation

Complete API reference for the FormSelect component

Props

属性名	类型	默认值	描述
`className`	`string`	-	自定义类名
`disabled`	`boolean`	-	是否禁用下拉选择框，禁用的控件不可聚焦且不参与表单提交
`htmlSize`	`number`	-	原生 `select` 的 `size` 属性，控制在不展开时可见的选项数量，通常配合 `multiple` 使用
`id`	`string`	-	原生 `id` 属性，用于与 `label` 的 `htmlFor` 关联
`isInvalid`	`boolean`	`false`	是否应用无效状态样式（`is-invalid`），通常配合校验反馈使用
`isValid`	`boolean`	`false`	是否应用有效状态样式（`is-valid`）
`multiple`	`boolean`	-	是否允许多选，多选时按住 Ctrl（Windows）或 Cmd（macOS）键选择多个选项
`size`	`FormSelectSize`	-	下拉选择框尺寸，可选 `sm`、`lg`，对应 `form-select-sm`、`form-select-lg`
`...rest`	`SelectHTMLAttributes<HTMLSelectElement>`	-	根元素的所有原生属性（如 `value`、`defaultValue`、`onChange`、`required` 等）

Type Definitions

FormSelectProps

下拉选择框组件属性接口

export interface FormSelectProps extends Omit<SelectHTMLAttributes<HTMLSelectElement>, 'size'> {
  htmlSize?: number;
  isInvalid?: boolean;
  isValid?: boolean;
  size?: FormSelectSize;
}

FormSelectSize

下拉选择框尺寸类型

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