Yeti Field 组件完全指南用原生表单控件构建零脚本校验的字段【免费下载链接】yetiA CSS-first, native, zero-build layout and styling framework for web designers.项目地址: https://gitcode.com/gh_mirrors/fo/yeti导读Field 是 Yeti 布局与样式框架CSS-first、零构建中最核心的表单组件它把 label、control、hint、error 四件套收拢为一个紧凑的纵向字段让表单校验完全依赖浏览器原生状态:user-invalid与 ARIA 属性全程不需要一行 JavaScript。读完本文你将掌握 Field 的完整用法——从文本输入、下拉框到开关与滑块的自绘实现到data-size/data-inline/data-variant三个属性、令牌tokens体系与无障碍最佳实践并能结合源码与测试理解其底层原理。何时使用 Field表单里的每一种控件都适用 Fieldtext、email、number、select、textarea、checkbox、radio、switch、range。按照 Yeti 的组合哲学一个表单就是一个stack装着若干字段和一个按钮而字段负责补齐裸 HTML 做不到的三件事——label 与控件的链接关系、帮助文本hint、错误提示error。form classstack>.field { display: flex; flex-direction: column; gap: var(--yeti-field-gap); }其中--yeti-field-gap的默认值定义在src/tokens/components.css指向全局空间令牌var(--yeti-space-xs)。原生控件 控制令牌控件本身是原生元素只是被样式化到一组控制令牌control tokens上。因此一个主题只要改了--yeti-control-radius所有输入框的圆角就跟着变不需要改任何类名或选择器。以文本类控件为例field.css 给 text/email/number 等输入框、select、textarea 统一设置min-block-size: calc(var(--yeti-control-size) max(0px, var(--_yeti-size-space) - var(--yeti-space-sm)))最小高度由--yeti-control-size控制件最小高度决定背景取--yeti-control-surface边框取--yeti-control-border圆角取--yeti-control-radiusfont: inheritfont-size: var(--_yeti-size-text)让控件跟随字段的尺寸档位。细节处理textarea额外给出padding-block和min-block-size: 4lhfield.css用lh单位见下文浏览器支持select通过appearance: none去掉原生箭头再用--yeti-control-chevron背景图绘制自定义下拉箭头field.css获得焦点时边框变为--yeti-color-border-strongfield.css。这些控制令牌清单在manifest.json里被完整登记为公开令牌Token说明--yeti-field-gaplabel、control、hint 之间的间距--yeti-control-size控件的最小高度--yeti-control-radius控件的圆角--yeti-control-border控件静止时的边框--yeti-control-surface控件的背景色--yeti-control-chevronselect 的箭头图片--yeti-color-alert无效控件的边框色另外还有 4 个内部令牌--_yeti-variant、--_yeti-on-variant、--_yeti-size-text、--_yeti-size-space以下划线开头、不公开可能在次要版本间变化不建议在项目里直接引用。错误显示:user-invalid与aria-invalid错误提示默认隐藏直到控件无效且被访问者触碰过才显示——这个状态用原生伪类:user-invalid表达由浏览器自己判定用户已经离开这个控件。另外服务器端校验失败后可以给控件设置aria-invalidtrue错误会立刻显示边框同时变为 alert 色。对应实现见 field.css.field [data-error] { display: none; font-size: var(--yeti-text-sm); color: var(--yeti-color-alert-text); } .field:has(:user-invalid, [aria-invalidtrue]) [data-error] { display: block; }注意两个关键设计空表单加载时不会一片红——因为:user-invalid要求用户真正触碰过控件这在 field.spec.js 里被测试覆盖初始时错误为display: none填入无效值并 blur 后错误变为display: block且边框变色。只有出错的那个控件变红——选择器限定在字段内部.field:has(...)测试an invalid control only reddens its own controlfield.spec.js验证了给一个控件设置aria-invalidtrue不会波及同组其他控件。这里还用到了.affix的组合支持当控件被 affix 包裹时边框红色会作用到 affix 内部实际的input/select上。required 标记带required的控件其 label 之后会出现一个*标记field.css.field:has([required]) :is(label, legend)::after { content: *; color: var(--yeti-color-alert-text); }它用::after伪元素实现并且只是视觉装饰——真正的语义仍由required属性承担屏幕阅读器朗读的也是该属性。checkbox / radio内联布局与变体色勾选复选框和单选框会自动变成内联布局控件在前、label 在后、垂直居中无需任何额外属性field.css.field:is([data-inline], :has( input:is([typecheckbox], [typeradio]))) { flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--yeti-space-xs); }视觉上checkbox/radio 被重绘为 1.25em 见方的原生外观替代appearance: none选中态是一个变体色中心 表面色圆环背景和边框变为变体色再用box-shadow: inset 0 0 0 0.2em var(--yeti-control-surface)画出内环field.css。radio 则单独设border-radius: 50%。fieldset classfield legendNotify me by/legend div classfieldinput idn-email typecheckbox namenotify valueemaillabel forn-emailEmail/label/div div classfieldinput idn-sms typecheckbox namenotify valuesmslabel forn-smsText message/label/div p>div classfieldinput iddark typecheckbox roleswitchlabel fordarkDark mode/label/div对应测试a checkbox with roleswitch is a track whose thumb slides and takes the variant colourfield.spec.js验证了开关宽度超过高度 1.5 倍、切换后背景色与位置都发生变化。range细轨道 大圆形滑块range输入得到一条细轨道0.25em和一颗变体色圆形滑块滑块直径 1.25em而输入框整体高度保持一个控件高度--yeti-control-size方便抓取field.css。轨道刻意不填充到当前值——因为纯 CSS 读不到控件的 value无法得知滑块位置。div classfieldlabel forvolumeVolume/labelinput idvolume typerange min0 max100 value40/divFirefox 下测试还能直接读到::-moz-range-thumb的几何尺寸验证滑块近似圆形field.spec.js。三个属性data-size />div classfield label foremailEmail/label input idemail typeemail required aria-describedbyemail-hint email-error p idemail-hint contenteditable="false">【免费下载链接】yetiA CSS-first, native, zero-build layout and styling framework for web designers.项目地址: https://gitcode.com/gh_mirrors/fo/yeti创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考