shadcn-svelte Field 实战手册快速搭建可访问的分组表单【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelteshadcn-svelte 的 Field 组件族把标签、控件、辅助文本打包成符合无障碍规范的表单字段。一条命令安装分组、校验、响应式布局即装即拼。先看全貌6 个子组件就够日常用Field 入口一次性导出 10 个子组件每天真正要记的只有这 6 个组件渲染元素职责Field.Fielddivrolegroup单字段包装器决定纵向/横向布局方向Field.Groupdiv多字段堆叠容器自带容器查询container query按父容器宽度而非视口触发样式Field.SetField.Legendfieldsetlegend语义分组键盘用户可整组跳转Field.Labellabel字段标签靠for关联控件idField.Errordivrolealert验证错误无错误时自动不渲染Field.Separatordiv字段间分割线可覆盖一段文字剩下三个都是摆文本的Content是把标签和说明组合进同一纵向 flex 列的容器Description是一段辅助说明文字Title是给选择卡片用的标题div不承担表单关联。所有子组件都接受class覆盖并透传原生属性定制方式和其他 shadcn-svelte 组件完全一致。一条命令装完19 行代码跑通安装只需npx shadcn-sveltelatest add field装完写下面这段就能跑四层结构Set→Legend→Group→Field和分割线一次看全script langts import * as Field from $lib/components/ui/field/index.js; import { Input } from $lib/components/ui/input/index.js; /script Field.Set Field.LegendProfile/Field.Legend Field.Group Field.Field Field.Label fornameFull name/Field.Label Input idname placeholderEvil Rabbit / /Field.Field Field.Separator / Field.Field Field.Label foremailEmail/Field.Label Input idemail typeemail / /Field.Field /Field.Group /Field.Set两个值得读的机制纯 CSS 布局 三层错误布局方向切换没有一行 JS打开 docs/src/lib/registry/ui/field/field.svelte你会看到orientation的全部逻辑就是一个tvtailwind-variants类名生成器export const fieldVariants tv({ base: cn-field group/field flex w-full, variants: { orientation: { vertical: flex-col *:w-full, horizontal: flex-row items-center has-[[data-slotfield-content]]:items-start, responsive: flex-col *:w-full md/field-group:flex-row md/field-group:items-center md/field-group:*:w-auto, }, }, defaultVariants: { orientation: vertical }, });为什么这么设计因为tv只在编译期吐出类名切换方向零运行时开销响应式能力完全落在 CSS 里。有两处细节值得咂摸md/field-group是容器查询断点由 docs/src/lib/registry/ui/field/field-group.svelte 里声明的container/field-group提供。切换由父容器宽度驱动——把表单塞进 320px 的侧栏它就保持纵向不用操心媒体查询has-[[data-slotfield-content]]用 CSS:has()选择器自动探测兄弟节点里有没有Field.Content有就改顶部对齐items-start复选框、单选框再mt-px微调基线。连判断 DOM 存不存在这种事都不用写 JS。所以启用响应式布局只需要两步外层套Field.GroupField上设orientationresponsive标签和说明一起塞进Field.Contentmd宽度内自动从纵向变水平。错误状态三层联动视觉 辅助技术 即时播报一个合格的错误字段是三件套各管一个受众Field上加data-invalid样式层据此把整个字段块染成错误色控件本身加aria-invalid屏幕阅读器会把它播报为无效输入控件之后紧跟Field.Error它渲染为rolealert错误一出现辅助技术立刻播报。Field.Error源码还做了容错核心是一段$derivedconst hasContent $derived.by(() { if (children) return true; if (!errors || errors.length 0) return false; if (errors.length 1 !errors[0]?.message) return false; return true; });没有错误时div直接不渲染表单里不留空白传入errors{{ message: … }}[]数组时单条错误渲染成一句、多条渲染成项目符号列表——这个形状正好对上 superforms、felte 等表单库吐出的错误集合可以直接透传。场景配方照抄替换字段即可最小示例跑通后看看扔进真实项目长什么样。配方一可点击选择卡片。技巧是把Field.Field整个包进Field.Label——卡片本身变成 label点哪都等效于勾选内部单选框Field.Title负责标题展示Field.Group Field.Label Field.Field orientationhorizontal Field.Content Field.TitleMonthly/Field.Title Field.Description$9/month, cancel anytime/Field.Description /Field.Content RadioGroup.Item valuemonthly / /Field.Field /Field.Label Field.Separator / Field.Label Field.Field orientationhorizontal Field.Content Field.TitleYearly/Field.Title Field.Description$90/year, save 17%/Field.Description /Field.Content RadioGroup.Item valueyearly / /Field.Field /Field.Label /Field.Group配方二带校验的设置页分组表单。换个业务场景骨架完全不变——错误三层联动加响应式布局一起用Field.Set Field.LegendBilling/Field.Legend Field.DescriptionChanges take effect after next cycle./Field.Description Field.Group Field.Field contenteditable="false">【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考