企业官网建设流程全解析

shadcn-svelte Field 组件快速上手：一个 orientation 属性切换三种表单布局

【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte

Field 是 shadcn-svelte 中的表单字段组件族，把标签、输入控件和辅助文本组合成结构规范、可直接被屏幕阅读器识别的表单。如果你正在用 Svelte 5 写表单，还在手写 div 嵌套和对齐 class，这篇文章适合你：从安装到垂直/水平/响应式三种布局、再到错误状态落地，照做即可跑通。

为什么用 Field：少写一堆 flex 和 class

没有它时，你要为每个字段手工处理标签换行、描述文字缩进、错误提示对齐，再遇到移动端竖排、桌面横排还要重做一遍布局，错误态更是全靠 class 拼。用了它之后，「标签 + 控件 + 描述 + 错误」变成固定插槽组合，布局方向由orientation一个属性决定，语义和可访问性由组件内置。

一条命令完成安装，5 分钟跑通第一个字段

CLI 安装只需一行，组件会落到项目的$lib/components/ui/field/目录：

npx shadcn-svelte@latest add field

手动安装则是把仓库里 docs/src/lib/registry/ui/field/ 的全部.svelte文件与index.ts复制到$lib/components/ui/field/，注意cn工具函数（来自$lib/utils.js）是编译依赖，项目里要已有。

最小可运行示例，命名空间导入后直接组合：

<script lang="ts"> import * as Field from "$lib/components/ui/field/index.js"; import { Input } from "$lib/components/ui/input/index.js"; </script> <Field.Field> <Field.Label for="email">Email</Field.Label> <Input id="email" placeholder="you@example.com" /> <Field.Description>We'll never share your address.</Field.Description> </Field.Field>

组件清单：10 个子组件与各自职责

全部子组件由 index.ts 统一导出，均有FieldXxx长名别名可用。

三种布局模式：垂直、水平、响应式怎么选

orientation由 field.svelte 中 tailwind-variants 定义的fieldVariants管理，共三个取值，下面按使用频率从高到低讲。

垂直布局（默认）：移动端表单的首选

不写orientation就是垂直：标签、控件、描述自上而下堆叠。看 field.svelte 一行就能明白它的特点——*:w-full让每个子元素占满整行，拇指操作时命中区域最大，因此移动优先的注册、设置页直接用它。

水平布局：标签与控件并排

桌面端空间富余、表单字段多时，用orientation="horizontal"把标签和控件左右并排，一屏能塞下更多字段：

<Field.Field orientation="horizontal"> <Field.Label for="email">Email</Field.Label> <Input id="email" /> </Field.Field>

实现细节：源码对带Field.Content的字段做了专门处理（field.svelte），对齐方式从居中改为顶部对齐，复选框/单选框还会加mt-px微调以贴合标签基线——所以水平布局有描述文字时建议套上Field.Content。

响应式布局：容器查询自动决定方向

orientation="responsive"让你不用写任何媒体查询：窄容器里竖排，宽容器里自动转横排。

<Field.Group> <Field.Field orientation="responsive"> <Field.Content> <Field.Label for="name">Name</Field.Label> <Field.Description>Provide your full name</Field.Description> </Field.Content> <Input id="name" placeholder="Evil 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