安装
pnpm dlx shadcn@latest add https://yiui.dev/r/bar-field.json会连带安装 shadcn 组件 button。已存在的文件会询问是否覆盖。
用法
import { BarField } from "@/components/ui/bar-field/bar-field"
;<BarField label="名称" name="name" />它是方条系列的基础文本框。普通文本、搜索、密码和验证码使用它；需要手机号格式整理或证件号校验时，使用 phone-input、id-number-input。suffix 支持单位和密码切换按钮；footerAction 用于忘记密码等操作。type="search" 时有内容就显示清除键（与方条下拉的清除键同一档，替代浏览器自带的蓝色清除钮），其他类型可用 clearable 打开；清除只触发 onValueChange("")，并把焦点留在输入框里。无标签时必须提供 aria-label 或 aria-labelledby，placeholder 不能代替名称。
放进网格工具栏
放进网格工具栏时会自动去掉外框、圆角和底色，铺满整格，焦点环画在格子内侧；单独使用时不受影响。
示例
尺寸与状态
后缀
API
条内标签；省略时请提供 aria-label 或 aria-labelledby
类型React.ReactNode前置装饰图标
类型React.ReactNode后缀单位、快捷键或按钮；按钮尺寸应与字段一致
类型React.ReactNode条下方右侧操作
类型React.ReactNode高度档
类型"default" | "lg" | "sm" | undefined"default"外部校验错误
类型string | undefined条下方说明
类型React.ReactNode受控字符串
类型string | undefined初始字符串
类型string | undefined""字符串变化回调
类型((value: string) => void) | undefined输入节点引用
类型React.Ref<HTMLInputElement> | undefined有内容时显示清除键；清除只触发 onValueChange("")，不触发原生 onChange
boolean | undefinedtype === "search"清除键的读屏名称
类型string | undefined"清除"导出 BarFieldProps 类型。根元素的 data-slot 为 bar-field。
可访问性
字段通过 label 关联输入框，error 和 description 用 aria-describedby 关联。支持 name、form 和原生输入属性；非受控表单重置恢复 defaultValue。窄容器标签移到条上方。文字输入聚焦使用加深边框，后缀按钮用键盘聚焦环。