标签对不上、错误提示没处放用 shadcn-svelte Field 搭出可访问的 Svelte 5 表单字段【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte在 Svelte 5 项目里手堆表单你一定遇过标签对不上、错误提示没处放、分组就是一堆没语义的 div。shadcn-svelte Field 用一组可组合的子组件解决了这套问题标签、控件与辅助文本组成可访问表单字段三十秒上手。三十秒跑通shadcn-svelte 安装只要一行整个组件族会落到$lib/components/ui/field/下npx shadcn-sveltelatest add field然后是最小示例一个字段包含标签、输入框和辅助说明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 fornameFull name/Field.Label Input idname placeholderEvil Rabbit / Field.DescriptionThis appears on invoices and emails./Field.Description /Field.Field注意 Label 上的for和 Input 上的id这个显式关联是 Field 家族所有可访问性的地基。拆解 Field 的三层抽象子组件看着多其实按「语义层 / 布局层 / 反馈层」三层来记就清楚了。语义层Field.Set渲染原生fieldsetField.Legend渲染原生legend源码在docs/src/lib/registry/ui/field/下可以直接看浏览器和辅助技术天然知道这是一个分组、它叫什么。Field.Description提供分组级说明。Field.Title也属于这层——它是选择卡片场景里的标题样式 div纯展示不像Field.Label那样承担表单关联。分组骨架长这样Field.Set Field.LegendProfile/Field.Legend Field.DescriptionThis appears on invoices and emails./Field.Description /Field.Set布局层Field.Field是单个字段的核心包装器渲染为带rolegroup的 div默认纵向 flexorientation控制布局方向。Field.Content是一个纵向 flex 列把标签和描述捆在一起保证控件再宽描述也和标签对齐。Field.Group用来堆叠多个字段自己身上带了容器查询下面细说Field.Separator是纯视觉分割线字段之间想断开就插一个。先感受下形态Field.Field orientationhorizontal Field.Content Field.Label fornameName/Field.Label Field.DescriptionFull name/Field.Description /Field.Content Input idname / /Field.Field反馈层三个标记配合用。Field.Field上加data-invalid整个字段块进入错误态由样式层驱动控件上加aria-invalid屏幕阅读器能识别出它无效控件后面紧跟Field.Error输出错误消息。没有内容也没有错误时Field.Error不渲染任何 DOM——源码里用$derived算了这个判断无错字段不会留下空白。具体怎么接校验库后面场景二展开。三种布局怎么写vertical默认标签、控件、辅助文本自上而下堆叠子元素默认占满整行。移动端优先的表单最省心什么都不用写。horizontal标签与控件左右并排、垂直居中适合桌面端信息密度高的设置页。responsive最有意思的一种靠容器查询驱动。Field.Group自身声明了container/field-grouporientation 为 responsive 的字段在父容器达到 md 断点时自动从纵向切到横向。说人话就是父容器宽度决定布局与视口无关。这是 Svelte 响应式表单布局里最实用的一招纯 CSS不监听任何尺寸。两种写法放一起对比Field.Field orientationhorizontal Field.Label forphonePhone/Field.Label Input idphone / /Field.Field !-- responsive: Field.Group 的容器查询在起作用 -- Field.Group Field.Field orientationresponsive Field.Content Field.Label fornameName/Field.Label Field.DescriptionFull name/Field.Description /Field.Content Input idname / /Field.Field /Field.Group注意 responsive 搭配Field.Content用——水平态下的顶部对齐处理就是靠检测field-content是否存在来触发的。两个高频实战场景⚡场景一选择卡片整卡可点选从几张卡片里挑一个这种需求关键手法是把嵌套反过来Field.Label包在Field.Field外面。这样整张卡片可点区域等于整个 label点哪里都等于点控件。内部用Field.Content组织Field.Title标题和Field.Description描述RadioGroup.Item放右侧。职责要分清Field.Title是标题样式的 div纯视觉Field.Label是真正的label负责 for/id 关联。最简形态两张卡片选一张RadioGroup.Root bind:value{env} Field.Label fork8s Field.Field orientationhorizontal Field.Content Field.TitleKubernetes/Field.Title /Field.Content RadioGroup.Item valuek8s idk8s / /Field.Field /Field.Label /RadioGroup.Root✅场景二接入 Svelte 表单验证三步走Field.Field上data-invalid→ 控件上aria-invalid→ 控件后Field.Error。接 superforms 或 felte 这类校验库时重点看Field.Error的errors属性传入[{ message }]数组单条错误直接渲染文本多条自动渲染为项目符号列表——把校验库的错误对象映射成这个形状就能直接喂进去。接法很直白Field.Field contenteditable="false">【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 标签对不上、错误提示没处放？用 shadcn-svelte Field 搭出可访问的 Svelte 5 表单字段
标签对不上、错误提示没处放用 shadcn-svelte Field 搭出可访问的 Svelte 5 表单字段【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte在 Svelte 5 项目里手堆表单你一定遇过标签对不上、错误提示没处放、分组就是一堆没语义的 div。shadcn-svelte Field 用一组可组合的子组件解决了这套问题标签、控件与辅助文本组成可访问表单字段三十秒上手。三十秒跑通shadcn-svelte 安装只要一行整个组件族会落到$lib/components/ui/field/下npx shadcn-sveltelatest add field然后是最小示例一个字段包含标签、输入框和辅助说明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 fornameFull name/Field.Label Input idname placeholderEvil Rabbit / Field.DescriptionThis appears on invoices and emails./Field.Description /Field.Field注意 Label 上的for和 Input 上的id这个显式关联是 Field 家族所有可访问性的地基。拆解 Field 的三层抽象子组件看着多其实按「语义层 / 布局层 / 反馈层」三层来记就清楚了。语义层Field.Set渲染原生fieldsetField.Legend渲染原生legend源码在docs/src/lib/registry/ui/field/下可以直接看浏览器和辅助技术天然知道这是一个分组、它叫什么。Field.Description提供分组级说明。Field.Title也属于这层——它是选择卡片场景里的标题样式 div纯展示不像Field.Label那样承担表单关联。分组骨架长这样Field.Set Field.LegendProfile/Field.Legend Field.DescriptionThis appears on invoices and emails./Field.Description /Field.Set布局层Field.Field是单个字段的核心包装器渲染为带rolegroup的 div默认纵向 flexorientation控制布局方向。Field.Content是一个纵向 flex 列把标签和描述捆在一起保证控件再宽描述也和标签对齐。Field.Group用来堆叠多个字段自己身上带了容器查询下面细说Field.Separator是纯视觉分割线字段之间想断开就插一个。先感受下形态Field.Field orientationhorizontal Field.Content Field.Label fornameName/Field.Label Field.DescriptionFull name/Field.Description /Field.Content Input idname / /Field.Field反馈层三个标记配合用。Field.Field上加data-invalid整个字段块进入错误态由样式层驱动控件上加aria-invalid屏幕阅读器能识别出它无效控件后面紧跟Field.Error输出错误消息。没有内容也没有错误时Field.Error不渲染任何 DOM——源码里用$derived算了这个判断无错字段不会留下空白。具体怎么接校验库后面场景二展开。三种布局怎么写vertical默认标签、控件、辅助文本自上而下堆叠子元素默认占满整行。移动端优先的表单最省心什么都不用写。horizontal标签与控件左右并排、垂直居中适合桌面端信息密度高的设置页。responsive最有意思的一种靠容器查询驱动。Field.Group自身声明了container/field-grouporientation 为 responsive 的字段在父容器达到 md 断点时自动从纵向切到横向。说人话就是父容器宽度决定布局与视口无关。这是 Svelte 响应式表单布局里最实用的一招纯 CSS不监听任何尺寸。两种写法放一起对比Field.Field orientationhorizontal Field.Label forphonePhone/Field.Label Input idphone / /Field.Field !-- responsive: Field.Group 的容器查询在起作用 -- Field.Group Field.Field orientationresponsive Field.Content Field.Label fornameName/Field.Label Field.DescriptionFull name/Field.Description /Field.Content Input idname / /Field.Field /Field.Group注意 responsive 搭配Field.Content用——水平态下的顶部对齐处理就是靠检测field-content是否存在来触发的。两个高频实战场景⚡场景一选择卡片整卡可点选从几张卡片里挑一个这种需求关键手法是把嵌套反过来Field.Label包在Field.Field外面。这样整张卡片可点区域等于整个 label点哪里都等于点控件。内部用Field.Content组织Field.Title标题和Field.Description描述RadioGroup.Item放右侧。职责要分清Field.Title是标题样式的 div纯视觉Field.Label是真正的label负责 for/id 关联。最简形态两张卡片选一张RadioGroup.Root bind:value{env} Field.Label fork8s Field.Field orientationhorizontal Field.Content Field.TitleKubernetes/Field.Title /Field.Content RadioGroup.Item valuek8s idk8s / /Field.Field /Field.Label /RadioGroup.Root✅场景二接入 Svelte 表单验证三步走Field.Field上data-invalid→ 控件上aria-invalid→ 控件后Field.Error。接 superforms 或 felte 这类校验库时重点看Field.Error的errors属性传入[{ message }]数组单条错误直接渲染文本多条自动渲染为项目符号列表——把校验库的错误对象映射成这个形状就能直接喂进去。接法很直白Field.Field contenteditable="false">【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考