Input 输入框

显示表单输入字段或看起来像输入字段的组件。

基础用法

Value:

Example

禁用状态

Example

只读状态

Example

尺寸

Example

带图标

Example

可清除

Example

密码输入

Example

错误状态

Example

主题定制

你可以使用 Tailwind CSS 类自定义输入框的外观，或者通过覆盖全局 CSS 变量。

CSS 变量

:root {
  --input: 214.3 31.8% 91.4%;
  --ring: 222.2 84% 4.9%;
  --radius: 0.5rem;
}

.dark {
  --input: 217.2 32.6% 17.5%;
  --ring: 212.7 26.8% 83.9%;
}

Tailwind 定制

你也可以使用 class 属性添加自定义样式：

<BrInput class="border-blue-500 focus-visible:ring-blue-500" />

API

Props

属性名	类型	默认值	说明
modelValue	string | number	-	输入框的值。
defaultValue	string | number	-	输入框的默认值。
type	string	text	HTML input 类型属性。
disabled	boolean	false	是否禁用输入框。
readonly	boolean	false	是否只读。
placeholder	string	-	占位文本。
size	xs | sm | md | default | lg | xl | 2xl	default	输入框尺寸。
error	boolean	false	是否显示错误状态。
clearable	boolean	false	当有值时是否显示清除按钮。
showPassword	boolean	false	是否显示密码切换按钮（仅在 type="password" 时有效）。

Slots

名称	说明
prefix	显示在输入文本之前的内容。
suffix	显示在输入文本之后的内容。

Events

名称	参数	说明
update:modelValue	string | number	当输入值变化时触发。
clear	-	当点击清除按钮时触发。
input	Event	当输入值变化时触发。
change	Event	当输入值变化时触发（blur 或 enter）。
focus	Event	当输入框获得焦点时触发。
blur	Event	当输入框失去焦点时触发。