shadcn-svelte Field 实战三分钟搭出可访问的表单字段与分组输入【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte手写表单总绕不开三个坑水平布局里标签和输入框对不齐错误文案屏幕阅读器不读移动端桌面端还得各维护一套样式。shadcn-svelte 的 Field 组件族就是为此而生的——它把标签、控件和辅助文字包成一组可组合、可访问的表单字段布局在纵向与横向之间自动切换。读完这篇你能一条命令装好 Field、选对三种布局形态并把语义分组和错误反馈一次写对。一条命令安装三分钟跑通第一个字段结论这套组件是独立的注册项CLI 一条命令就能落进项目。npx shadcn-sveltelatest add field手动安装也行把 docs/src/lib/registry/ui/field/ 里的 11 个文件拷到项目的$lib/components/ui/field/目录前提是$lib/utils.js里已有cn工具函数。最小可运行示例五个节点就是一个完整字段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 foremail邮箱/Field.Label Input idemail placeholderyouexample.com / Field.Description用于接收账号通知。/Field.Description /Field.Field最容易踩的坑在这Field.Label的for必须和控件的id逐字符对上。一旦错位点文字就聚焦不到输入框屏幕阅读器也读不出字段名——关联断了可访问性等于归零。十个子组件一览长什么样替你省了什么事结论全部子组件从 index.ts 统一导出每个都有短名和FieldXxx长名两套别名怎么读着顺怎么叫。子组件在页面上长什么样它替你解决什么问题Field.Field一个看不见的分组框把标签、输入框、提示词拢成一整块对齐和间距交给它Field.Set一道真实的隔断原生 fieldset告诉浏览器「这几个控件是一伙的」键盘用户能按组进出Field.Legend隔断上的标题字给分组起名字读屏一进来就知道这组在讲什么Field.Group纵向堆叠区多个字段摞在一起自动留好间距响应式切换也靠它撑场Field.Content一根看不见的竖列水平布局时把标题和说明摞成一列文字不会飘位Field.Label可点击的文字标签点文字就聚焦输入框是字段的正式「入口」Field.Title一段标题样式的文字给选择卡片用只负责好看不负责点击关联Field.Description一行辅助说明把「该怎么填」提前说清用户少问一遍Field.Error一条错误提示验证失败时现形没错误时自己隐身不占位Field.Separator一条细线线上还能加字在分组之间划线想在线上写个标签也行三种布局形态响应式切换只要三行代码结论orientation属性只有三个取值差别全在标签相对控件怎么摆。形态默认与否适合场景关键写法vertical默认移动优先、字段多的表单什么都不写Field.Field即可horizontal否桌面端、字段窄而多的区块orientationhorizontalresponsive否同一份表单要兼顾手机和桌面orientationresponsive并放进Field.Groupresponsive 的精髓在容器查询Field.Group自己声明了container/field-group命名空间field-group.svelte#L13-L22而responsive变体是一组md/field-group前缀的类名field.svelte#L4-L18。换个说法组件量的是自己屋子的大小不是窗外视口的宽度——父容器宽到 md 断点就自动翻成横向窄了就竖着排完全由容器驱动。Field.Group Field.Field orientationresponsive Field.Content Field.Label forname姓名/Field.Label Field.Description用于身份识别请填写真实姓名。/Field.Description /Field.Content Input idname required / /Field.Field /Field.GroupField.Content在这里是关键角色横向时它把标题与说明压成同一列说明文字不会和控件错位。只有单行标题的字段可以省掉它。四个高频实战组合直接抄进项目结论下面四个组合能覆盖你日常九成以上的表单需求仓库里都有完整源文件可对照。语义分组Set 加 Legend 给控件划地盘Field.Set Field.Legend账单地址/Field.Legend Field.Group !-- 街道、城市两个 Field.Field -- /Field.Group /Field.Set为什么这样组合Set 是原生 fieldset控件在浏览器眼里被「划进同一地盘」键盘用户可以整组进出。完整写法见 field-field-set-demo.svelte。可选卡片Label 包着 FieldField.Label fork8s Field.Field orientationhorizontal Field.Content Field.TitleKubernetes/Field.Title Field.Description在 K8s 集群上运行任务。/Field.Description /Field.Content RadioGroup.Item valuek8s idk8s / /Field.Field /Field.Label为什么这样组合把Field塞进Field.Label整张卡片都成了点击热区点哪都选中单选钮。注意Field.Title只是标题样式的文字field-title.svelte#L13-L20点击关联靠外层 Label 承担。原始示例见 field-choice-card.svelte#L14-L22。水平开关控件在前也照样关联Field.Field orientationhorizontal Switch idnewsletter / Field.Label fornewsletter订阅通讯/Field.Label /Field.Field为什么这样组合horizontal 模式把开关和文字垂直居中对齐for/id的关联在控件排在标签前面时同样成立。错误字段三个标记各写一处Field.Field contenteditable="false">【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考