shadcn-svelte Input Group 组件完全指南：安装、API 与 10 种实战组合
发布时间：2026/9/16 22:13:40 作者：尧图编辑部 阅读量：1,286
shadcn-svelte Input Group 组件完全指南安装、API 与 10 种实战组合【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelteInput Group 是 shadcn-svelte 中用于在输入框input或文本域textarea周围展示附加信息、图标或操作按钮的组合式组件。本文以 input-group.md 为骨架结合仓库中该组件的真实源码docs/src/lib/registry/ui/input-group/与注册表定义docs/static/registry/input-group.json系统讲解其安装方式、组件 API、对齐/尺寸变体以及图标、文本、按钮、Tooltip、下拉菜单、Spinner、Label、Button Group、自定义输入等完整实战用法。读完本文你将能够用 Input Group 快速搭建搜索栏、URL 前缀输入、富文本聊天框等典型界面并理解其焦点管理、错误态与无障碍设计的底层实现。Input Group 是什么Input Group 的核心思想是把输入控件 附加内容封装为一个整体它不像传统的Input 外部图标那样需要手动处理间距、边框和焦点样式而是通过内部结构和样式约定让图标、文本、按钮、Tooltip、下拉菜单等附加物与输入框融合在同一个带边框的容器内。从源码看Input Group 由以下 6 个部件compound parts组成导出文件见 input-group/index.ts 对应的注册表内容部件组件渲染元素职责RootInputGroup.Rootdiv容器负责边框、圆角、焦点/错误态样式InputInputGroup.Input基于Input输入框自动挂载data-slotinput-group-controlTextareaInputGroup.Textarea基于Textarea文本域自动挂载data-slotinput-group-controlAddonInputGroup.Addondiv附加物容器通过align控制摆放方向TextInputGroup.Textspan纯文本附加信息ButtonInputGroup.Button基于Button组内操作按钮内置紧凑尺寸变体此外注册表还导出了InputGroup、InputGroupAddon、InputGroupButton等全名别名方便不同风格的导入方式。安装方式一CLI 命令推荐在项目根目录执行npx shadcn-sveltelatest add input-groupCLI 会自动从注册表拉取组件文件并依据 docs/static/registry/input-group.json 中的registryDependencies一并安装button、input、textarea三个依赖组件同时将tailwind-variants^3.2.2加入 devDependencies这是 Addon 与 Button 变体样式所依赖的库。方式二手动安装安装图标库lucide/sveltenpm install lucide/svelte -D将上述 6 个部件文件复制到项目的$lib/components/ui/input-group/目录并创建index.ts统一导出导出结构与注册表文件中files[0].content完全一致。组件 API 与源码解析Root容器与状态样式input-group.svelte 渲染一个带rolegroup语义和data-slotinput-group标记的div基础类为relative flex w-full min-w-0 items-center outline-none。注册表生成的真实样式见 input-group.json 中input-group.svelte条目额外包含边框与底色border-input、rounded-md、border、shadow-xs高度自适应默认h-9当容器内存在textarea时通过has-[textarea]:h-auto自动切换对齐响应式根据子元素data-align属性动态调整输入框内边距如存在block-start附加物时切换为纵向 flex 布局并调整输入框pb-3/pt-3焦点态通过has-[[data-slotinput-group-control]:focus-visible]选择器在内部控件获得焦点时为整个容器绘制border-ring与 3px 的ring-ring/50光环错误态通过has-[[data-slot][aria-invalidtrue]]选择器为容器应用border-destructive与红色 ring让整个分组随输入控件的校验状态一并变红。可见整个组件只依赖data-slot与aria-invalid属性协作而不需要任何 JavaScript 状态管理。Addon附加物容器与对齐变体input-group-addon.svelte 是承载图标、文本、按钮等附加物的容器核心是align变体基于tailwind-variants定义align值效果inline-start默认水平排列在输入框左侧order-first左侧留ps-3内边距inline-end水平排列在输入框右侧order-last右侧留pe-3内边距block-start纵向排列在顶部order-first w-full justify-start用于 Textarea 场景block-end纵向排列在底部order-last w-full justify-start用于 Textarea 场景它还包含一个值得注意的交互细节点击 Addon 空白区域时会通过e.currentTarget.parentElement?.querySelector(input)?.focus()自动聚焦容器内的输入框但若点击目标是button则跳过避免误触按钮。Input 与 Textarea自动化的输入控件input-group-input.svelte 直接复用基础Input组件附加data-slotinput-group-control与flex-1注册表版本还会移除默认边框与阴影rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0使输入框完全融入容器边框。value采用$bindable()双向绑定使用方式与普通 Input 一致。input-group-textarea.svelte 同理复用基础Textarea额外添加flex-1 resize-none并保持data-slotinput-group-control因此容器级的焦点环与错误态样式对文本域同样生效。Button组内紧凑按钮input-group-button.svelte 基于基础Button默认variantghost、typebutton并提供专为输入组设计的紧凑size变体size说明xs默认高度 24px适合组内文字按钮sm高度 32px稍大的文字按钮icon-xs24×24 纯图标按钮圆形化时常用icon-sm32×32 纯图标按钮Text附加文本input-group-text.svelte 渲染span内置text-muted-foreground颜色与图标尺寸约束[_svg:not([class*size-])]:size-4适合展示https://、单位、统计结果等辅助文字。基础用法参考 input-group.md 的 Usage 示例一个典型的搜索框如下script langts import * as InputGroup from $lib/components/ui/input-group/index.js; import SearchIcon from lucide/svelte/icons/search; /script InputGroup.Root InputGroup.Input placeholderSearch... / InputGroup.Addon SearchIcon / /InputGroup.Addon InputGroup.Addon aligninline-end InputGroup.ButtonSearch/InputGroup.Button /InputGroup.Addon /InputGroup.Root要点图标放在默认inline-start的 Addon 中按钮通过aligninline-end排到右侧Addon 内部不限定只能放一种内容可以自由组合图标、文本与按钮若希望输入框获得占满剩余宽度无需额外处理flex-1已内置于 Input/Textarea 部件。实战示例以下示例均可在仓库中找到对应源码docs/src/lib/registry/examples/ 下的input-group-*-demo.svelte并可在官方文档页实时预览。1. 图标Icon在 Addon 中直接放入图标组件即可无需任何额外样式。参考 input-group-icon-demo.svelteInputGroup.Root InputGroup.Input placeholderSearch... / InputGroup.Addon SearchIcon / /InputGroup.Addon InputGroup.Addon aligninline-end12 results/InputGroup.Addon /InputGroup.Root该模式也常与lucide/svelte或tabler/icons-svelte配合使用。2. 文本Text用InputGroup.Text在输入框左侧展示固定前缀例如 URL 协议头。参考 input-group-text-demo.svelte 及综合示例 input-group-demo.svelteInputGroup.Root InputGroup.Input placeholderexample.com class!ps-1 / InputGroup.Addon InputGroup.Texthttps:///InputGroup.Text /InputGroup.Addon /InputGroup.Root3. 按钮Button在 Addon 中放入InputGroup.Button执行提交、搜索等操作。按钮支持variant默认ghost与size变体可切换为outline、default并支持disabled等 Button 原有属性InputGroup.Root InputGroup.Input placeholderSearch... / InputGroup.Addon aligninline-end InputGroup.Button variantdefault sizeicon-xs ArrowUpIcon / /InputGroup.Button /InputGroup.Addon /InputGroup.Root4. TooltipInput Group 与 Tooltip 组件天然兼容把InputGroup.Button作为Tooltip.Trigger的 child snippet 内容即可参考 input-group-tooltip-demo.svelte 与综合示例Tooltip.Root Tooltip.Trigger {#snippet child({ props })} InputGroup.Button {...props} classrounded-full sizeicon-xs IconInfoCircle / /InputGroup.Button {/snippet} /Tooltip.Trigger Tooltip.ContentThis is content in a tooltip./Tooltip.Content /Tooltip.Root由于 Addon 的点击聚焦逻辑会跳过button元素Tooltip 触发器不会干扰输入框的聚焦行为。5. Textarea块级对齐Input Group 同样支持文本域。此时附加物应使用alignblock-start或alignblock-end纵向布局见 input-group-textarea-demo.svelteInputGroup.Root InputGroup.Textarea placeholderAsk, Search or Chat... / InputGroup.Addon alignblock-end InputGroup.Button variantdefault classrounded-full sizeicon-xs IconPlus / /InputGroup.Button InputGroup.Text classms-auto52% used/InputGroup.Text Separator orientationvertical class!h-4 / InputGroup.Button variantghost disabled sizeicon-xs ArrowUpIcon / /InputGroup.Button /InputGroup.Addon /InputGroup.Root块级 Addon 内的多个元素默认按纵向堆叠可通过ms-auto等工具类微调对齐并可使用Separator分隔不同区域。6. Spinner加载状态处理输入中的异步请求如搜索联想、表单提交时可在 Addon 中放置Spinner组件shadcn-svelte 内置组件文档见 spinner.md展示加载指示器例如将图标替换为Spinner sizesm /放在inline-end位置配合按钮的disabled状态防止重复提交。7. Label无障碍标签在 Addon 中嵌套Label.Rootfor指向输入框的id即可为输入组添加可点击聚焦的标签提升无障碍体验。参考 input-group-label-demo.svelteInputGroup.Root InputGroup.Input idemail placeholdershadcn / InputGroup.Addon Label.Root foremail/Label.Root /InputGroup.Addon /InputGroup.Root也支持alignblock-start将标签放在顶部并可与 Tooltip 组合成标签 帮助按钮的布局。8. Dropdown下拉菜单将InputGroup.Button作为DropdownMenu.Trigger的 child snippet 内容即可让输入组内的按钮弹出下拉菜单综合示例 input-group-demo.svelte 中的 Auto / Agent / Manual 模式选择即为此实现。也可参考 input-group-dropdown-demo.svelte 查看完整代码。9. Button Group前缀/后缀按钮组用ButtonGroup包裹输入组或组内按钮可以构建带明确主/次操作的前缀或后缀区域文档见 button-group.md示例见 input-group-button-group-demo.svelte。10. 自定义输入Custom InputInput Group 不要求必须使用内置的Input/Textarea部件只要给任意自定义控件加上data-slotinput-group-control属性容器就会自动为其提供焦点环、错误态等行为。容器不会对自定义输入施加任何样式样式需自行通过class传入。参考 input-group-custom-input-demo.svelteInputGroup.Root textarea contenteditable="false">【免费下载链接】shadcn-svelteshadcn/ui, but for Svelte. ✨项目地址: https://gitcode.com/GitHub_Trending/sh/shadcn-svelte创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
尧图网站开发 