三种布局解决表单对齐与校验shadcn-svelte Field 组件实战【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte表单一多排版就开始失控表单只有三四个字段时没人会在意对齐。等到变成十几个字段问题就来了label 该放控件上方还是左侧错误提示到底跟字段还是跟表单屏幕变宽之后要不要为移动端和桌面端各写一套样式如果你被设置页折腾过应该都中过招。shadcn-svelte 的 Field 组件族就是为这个场景做的一组组件同时管对齐、校验展示和响应式切换垂直、水平、响应式三种布局共用同一套标签。组件拆解谁负责什么源码目录docs/src/lib/registry/ui/field/下有 11 个文件由index.ts统一导出。按交互职责分边界就清楚了布局骨架类Field与Field.Content。前者是单字段的容器负责决定标签、控件、辅助文本朝哪个方向排后者是一个纵向 flex 列专门把标签和描述文字打包成一列解决水平布局里描述文字错位的问题。文本标注类Label、Title、Description。Label 是真正的表单标签靠for关联控件Title 只是标题样式的div不承担表单关联专为选择卡片场景存在Description 是辅助说明。分组语义类Set、Legend、Group。前两者渲染原生fieldset/legend承担语义分组Group 是视觉堆叠容器顺带声明了容器查询。状态反馈类Error、Separator。Error 负责错误消息且自适应单条/多条Separator 是纯视觉分隔线没有任何 ARIA 语义。子组件渲染元素核心 Props一句话职责Fielddivrolegrouporientation单字段包装器决定纵向/水平/响应式Field.Setfieldset-语义分组容器Field.Legendlegend-分组标题归属 fieldsetField.Groupdiv-堆叠多个字段自带 container/field-groupField.Contentdiv-纵向列打包标签与描述Field.Labellabelfor字段标签按 id 关联控件Field.Descriptionp-可选辅助说明文本Field.Errordivrolealerterrors错误消息单条多条自适应Title 与 Separator 两个子组件参见源码目录。它们之间的嵌套关系是固定的Field.SetfieldsetField.Legend分组标题Field.Description组级说明Field.Group容器查询宿主Field.FieldrolegroupField.ContentField.LabelField.Description控件Input / Select / SwitchField.ErrorField.Separator快速跑通最小可运行示例安装有两条路CLI 执行npx shadcn-sveltelatest add field一条命令到位手动则把docs/src/lib/registry/ui/field/整个目录复制到项目的$lib/components/ui/field/前提是$lib/utils.js里已有cn工具函数。下面的最小示例一次覆盖三种形态正常字段、错误字段、水平布局字段。跑通后你应该能直观看到 Field 家族的三种基本用法。script langts import * as Field from $lib/components/ui/field/index.js; import { Input } from $lib/components/ui/input/index.js; import { Switch } from $lib/components/ui/switch/index.js; /script Field.Group Field.Field Field.Label fornameFull name/Field.Label Input idname placeholderEvil Rabbit / /Field.Field Field.Field>Field.Field Field.Label foremailEmail/Field.Label Input idemail / Field.DescriptionUsed to receive reset links./Field.Description /Field.Field水平并排桌面端的对齐细节orientationhorizontal切换为 flex-row 并垂直居中但源码里藏了两个细节docs/src/lib/registry/ui/field/field.svelte#L9-L12当子元素中存在Field.Content时改为顶部对齐items-start否则描述文字会跟着垂直居中立不正复选框和单选框额外加mt-px把圆点顶到标签基线上。所以水平布局建议始终用Field.Content包裹标签与描述。Field.Field orientationhorizontal Field.Content Field.Label foremailEmail/Field.Label Field.DescriptionUsed to receive reset links./Field.Description /Field.Content Input idemail / /Field.Field标签短、字段多时用它省纵向空间描述文字会折多行时别用顶部对齐的错位感会比较明显。容器查询驱动的响应式切换Field.Group自身声明了container/field-groupdocs/src/lib/registry/ui/field/field-group.svelte#L13-L22把自己注册为容器查询的宿主。orientationresponsive的所有切换都发生在md/field-group这个容器断点低于断点走纵向高于断点走水平。关键在于它读取的是Field.Group的宽度而不是视口宽度——表单嵌在窄侧边栏里就保持纵向放在宽卡片里就自动变横向不用写任何媒体查询。Field.Group Field.Field orientationresponsive Field.Content Field.Label fornameName/Field.Label Field.DescriptionYour full name./Field.Description /Field.Content Input idname required / /Field.Field /Field.Group嵌入侧边栏、抽屉、卡片里的表单一律用 responsive整页大表单则直接用 horizontal 更可控。错误状态与校验链路错误状态是三层标记各管一段缺一不可视觉层Field.Field>Field.Field>Field.Error errors{data?.fieldErrors?.email} /无障碍设计细节fieldset/legend 分组场景是十几个复选框共用一个通知标题行为是 Set 渲染原生 fieldset、Legend 渲染原生 legend屏幕阅读器把标题解析为整个组的名称Tab 在组内连续移动收益是用户不必在每个复选框上重听一遍标题。rolegroup 命名继承场景是选择卡片卡片内没有可见的单字段标签行为是 Field 输出rolegroupdocs/src/lib/registry/ui/field/field.svelte#L38-L47嵌套在外层 Label 或 Legend 之内时内部控件继承组级可访问名称收益是阅读器能播报计算环境Kubernetes未选中卡片虽然看着没标签实际不无名。分割线保持非语义场景是多个 Set 区块之间用 Separator 分隔行为是 Separator 只是带背景的 div不进朗读顺序收益是屏幕阅读器跳过分割线按区块连续朗读边界清晰但不被打断。进阶组合与常见误区组合技巧整卡可点选的选择卡片把Field包进Field.Label里整张卡片就变成一个 label点卡片任意位置都会勾选单选/复选框。官方示例docs/src/lib/registry/examples/field-choice-card.svelte的做法是 Label 包水平方向的 FieldContent 内放 Title 加 Description右侧挂RadioGroup.ItemField.Label forkubernetes Field.Field orientationhorizontal Field.Content Field.TitleKubernetes/Field.Title Field.DescriptionRun GPU workloads on a K8s cluster./Field.Description /Field.Content RadioGroup.Item valuekubernetes idkubernetes / /Field.Field /Field.Label多 Set 加 Separator 堆叠官方示例docs/src/lib/registry/examples/field-field-group-demo.svelte用两个 Set 演示长设置页——每个 Set 内部再套一层 Group 堆叠复选框行Set 之间只插一条 SeparatorField.Group Field.Set Field.LabelResponses/Field.Label Field.DescriptionGet notified when requests take time./Field.Description /Field.Set Field.Separator / Field.Set Field.LabelTasks/Field.Label Field.DescriptionGet notified when your tasks have updates./Field.Description /Field.Set /Field.GroupSeparator 内部基于 Separator 组件绝对定位一条贯穿线如果传入子内容比如文字标签会用bg-background背景色的内联块居中覆盖做出带文字的分割线。容易踩的坑Label 的for与控件id没对上for 指向不存在的 id标签就失去表单关联点文字无法聚焦输入框解法是把控件的 id 原样抄进 for。horizontal/responsive 下描述文字错位描述文字直接挂在 Field 里而不进 Content水平模式下它不会跟标签对齐标签和描述永远一起包进Field.Content。Separator 用太密每个字段之间都插分割线视觉上碎、朗读顺序里区块边界反而模糊只在 Set 级别的区块边界保留。只加 contenteditable="false">【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考