shadcn-svelte Field 组件快速上手一个 orientation 属性切换三种表单布局【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelteField 是 shadcn-svelte 中的表单字段组件族把标签、输入控件和辅助文本组合成结构规范、可直接被屏幕阅读器识别的表单。如果你正在用 Svelte 5 写表单还在手写 div 嵌套和对齐 class这篇文章适合你从安装到垂直/水平/响应式三种布局、再到错误状态落地照做即可跑通。为什么用 Field少写一堆 flex 和 class没有它时你要为每个字段手工处理标签换行、描述文字缩进、错误提示对齐再遇到移动端竖排、桌面横排还要重做一遍布局错误态更是全靠 class 拼。用了它之后「标签 控件 描述 错误」变成固定插槽组合布局方向由orientation一个属性决定语义和可访问性由组件内置。一条命令完成安装5 分钟跑通第一个字段CLI 安装只需一行组件会落到项目的$lib/components/ui/field/目录npx shadcn-sveltelatest add field手动安装则是把仓库里 docs/src/lib/registry/ui/field/ 的全部.svelte文件与index.ts复制到$lib/components/ui/field/注意cn工具函数来自$lib/utils.js是编译依赖项目里要已有。最小可运行示例命名空间导入后直接组合script langts import * as Field from $lib/components/ui/field/index.js; import { Input } from $lib/components/ui/input/index.js; /script Field.Field Field.Label foremailEmail/Field.Label Input idemail placeholderyouexample.com / Field.DescriptionWell never share your address./Field.Description /Field.Field组件清单10 个子组件与各自职责全部子组件由 index.ts 统一导出均有FieldXxx长名别名可用。组件渲染元素职责典型场景Field.Fielddivrolegroup单个字段的容器决定布局方向field-input-demo.svelteField.Setfieldset语义化分组容器field-field-set-demo.svelteField.Legendlegend分组标题field-field-set-demo.svelteField.Groupdiv堆叠多个 Field自带容器查询field-field-group-demo.svelteField.Contentdiv把标签与描述纵向对齐field-responsive-layout-demo.svelteField.Labellabel字段标签复用 Label 组件field-input-demo.svelteField.Titlediv卡片式字段标题不做表单关联field-choice-card.svelteField.Descriptionp辅助说明文字field-textarea-demo.svelteField.Errordivrolealert错误提示支持错误数组field-demo.svelteField.Separatordiv内嵌 Separator字段间分割线field-field-group-demo.svelte三种布局模式垂直、水平、响应式怎么选orientation由 field.svelte 中 tailwind-variants 定义的fieldVariants管理共三个取值下面按使用频率从高到低讲。垂直布局默认移动端表单的首选不写orientation就是垂直标签、控件、描述自上而下堆叠。看 field.svelte 一行就能明白它的特点——*:w-full让每个子元素占满整行拇指操作时命中区域最大因此移动优先的注册、设置页直接用它。水平布局标签与控件并排桌面端空间富余、表单字段多时用orientationhorizontal把标签和控件左右并排一屏能塞下更多字段Field.Field orientationhorizontal Field.Label foremailEmail/Field.Label Input idemail / /Field.Field实现细节源码对带Field.Content的字段做了专门处理field.svelte对齐方式从居中改为顶部对齐复选框/单选框还会加mt-px微调以贴合标签基线——所以水平布局有描述文字时建议套上Field.Content。响应式布局容器查询自动决定方向orientationresponsive让你不用写任何媒体查询窄容器里竖排宽容器里自动转横排。Field.Group Field.Field orientationresponsive Field.Content Field.Label fornameName/Field.Label Field.DescriptionProvide your full name/Field.Description /Field.Content Input idname placeholderEvil Rabbit required / /Field.Field /Field.Group这里的机制是容器查询Container Queries一种让子元素依据父容器宽度而非浏览器窗口宽度做响应式的 CSS 特性field-group.svelte 声明了container/field-group而 responsive 变体里写着md/field-group:flex-row即容器宽度跨过md断点时切为横排。因此Field必须放在Field.Group内才能生效。完整写法可对照 field-responsive-layout-demo.svelte。错误状态怎么落地视觉、辅助、文案三层「无效」需要同时说给三类受众Field 把这一层拆成三个动作给Field加data-invalid让整块进入错误视觉态样式层驱动可随主题定制红色高亮给控件加aria-invalid让屏幕阅读器识别无效输入在控件后紧跟Field.Error输出人话文案。三者同时给才算完整Field.Field contenteditable="false">【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考