UI组件前端【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址https://gitcode.com/gh_mirrors/sh/shadcn-vue点击查看免费下载导读Input Group输入组是 shadcn-vue 中用于在输入框Input或文本域Textarea周围附加图标、文字、按钮、Tooltip、下拉菜单等辅助信息或操作的工具型组件。它把“输入控件 附加内容”封装为一个整体容器自动处理布局、圆角、焦点环与错误态样式。本文以 input-group.md 文档为骨架结合apps/v4/registry/new-york-v4/ui/input-group下的完整源码与 apps/v4/components/demo 中的 10 余个真实演示讲解安装方式、全部子组件的 API 与对齐机制、常见实战组合并深入剖析其基于data-slot与has-*选择器实现的“自动聚焦/错误态联动”底层原理。读完本文你将能够独立搭建从简单搜索框到包含 Tooltip、Dropdown、Spinner 的复杂输入组并理解其样式联动机制以便自定义扩展。一、安装与项目结构CLI 安装Input Group 已收录在 shadcn-vue 的组件注册表中一条命令即可将组件源码复制到项目npx shadcn-vuelatest add input-group该命令会把组件文件安装到components/ui/input-group目录下本仓库内的源文件位于 apps/v4/registry/new-york-v4/ui/input-group。手动安装若偏好手动集成分三步安装依赖Input Group 依赖reka-ui提供无头 UI 能力同时其内部复用了Button、Input、Textarea组件与class-variance-authority的cva变体机制npm install reka-ui将 InputGroup.vue、InputGroupAddon.vue、InputGroupButton.vue、InputGroupInput.vue、InputGroupText.vue、InputGroupTextarea.vue 及 index.ts 复制到你的项目中。将组件内的/registry/new-york-v4/ui/...导入路径改为你项目实际的components/ui/...路径。组件集共包含 6 个导出见 index.tsInputGroup、InputGroupAddon、InputGroupButton、InputGroupInput、InputGroupText、InputGroupTextarea。它们的分工如下组件职责InputGroup外层容器负责整体边框、圆角、焦点/错误态与对齐布局InputGroupAddon附加内容容器可放图标、文本、按钮、Tooltip、Dropdown 等支持四种对齐InputGroupInput预置输入组样式的Input封装InputGroupTextarea预置输入组样式的Textarea封装InputGroupText纯文本/图标辅助展示InputGroupButton输入组内的紧凑按钮自带xs/sm/icon-*尺寸变体二、基础用法最小可用的输入组由InputGroupInputGroupInputInputGroupAddon组成例如文档中的搜索框示例可对照 InputGroupDemo.vue 的第一段实现script setup langts import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, InputGroupTextarea, } from /components/ui/input-group /script template InputGroup InputGroupInput placeholderSearch... / InputGroupAddon SearchIcon / /InputGroupAddon InputGroupAddon aligninline-end InputGroupButtonSearch/InputGroupButton /InputGroupAddon /InputGroup /template要点图标型 Addon 默认放在行首inline-start按钮型 Addon 用aligninline-end放到行尾。建议在模板中将InputGroupInput放在InputGroupAddon之前以保证键盘焦点导航顺序正确详见“焦点导航”小节。三、实战示例从简单到复杂1. 图标Icon最简单的用法是在输入框前后放置图标。文档演示见 InputGroupWithIcon.vue核心是InputGroupAddonSearchIcon //InputGroupAddon。图标通过 Addon 的样式规则自动获得统一的size-4尺寸无需手动设置[svg:not([class*size-])]:size-4。2. 文本Text用InputGroupText在输入框旁展示单位、前缀或后缀信息典型场景是金额、域名与邮箱后缀见 InputGroupWithText.vueInputGroup InputGroupAddon InputGroupText$/InputGroupText /InputGroupAddon InputGroupInput placeholder0.00 / InputGroupAddon aligninline-end InputGroupTextUSD/InputGroupText /InputGroupAddon /InputGroup同一文件中还展示了https://example.com.com的域名拼接、company.com邮箱后缀以及 textarea 右下角的字符计数提示120 characters left。InputGroupText本身是一个span自带text-sm、text-muted-foreground与图标尺寸处理见 InputGroupText.vue。3. 按钮Button在 Addon 内放置InputGroupButton即可执行操作。默认sizexs、variantghost适合紧凑布局图标按钮可传sizeicon-xs配合aria-label见 InputGroupWithButton.vue 与 InputGroupDemo.vue 中的发送按钮InputGroupButton Button /InputGroupButton InputGroupButton sizeicon-xs aria-labelCopy CopyIcon / /InputGroupButtonInputGroupButton基于项目通用的Button组件实现但通过inputGroupButtonVariants收窄了尺寸范围xs / icon-xs / sm / icon-sm并重设了内边距与圆角见 index.ts。variant 沿用按钮体系的default | destructive | outline | secondary | ghost | link。4. Tooltip给 Addon 内的按钮或图标附加 Tooltip 提供上下文说明。TooltipTrigger需配合as-child将触发行为透传给InputGroupButton见 InputGroupWithTooltip.vue 与 InputGroupDemo.vueTooltipProvider Tooltip TooltipTrigger as-child InputGroupButton classrounded-full sizeicon-xs InfoIcon classsize-4 / /InputGroupButton /TooltipTrigger TooltipContentThis is content in a tooltip./TooltipContent /Tooltip /TooltipProvider5. TextareaInput Group 同样适用于多行输入。关键规则InputGroupTextarea的附加内容应使用alignblock-start或alignblock-end块级对齐而不是行内对齐见 InputGroupWithTextarea.vueInputGroup InputGroupTextarea placeholderEnter message... / InputGroupAddon alignblock-end InputGroupButtonSend/InputGroupButton /InputGroupAddon /InputGroupInputGroup容器检测到内部是 textarea 时has-[textarea]:h-auto会自动放弃固定高度Addon 置于底部后整体呈上下结构。6. Spinner加载指示处理异步请求时可在输入框旁放一个Spinner展示加载状态。参考 InputGroupWithSpinner.vue配合data-disabled属性与disabled输入框呈现“禁用 加载”语义InputGroup>InputGroup InputGroupInput placeholderEnter search query / InputGroupAddon aligninline-end DropdownMenu DropdownMenuTrigger as-child InputGroupButton variantghost class!pr-1.5 text-xs Search In... ChevronDownIcon classsize-3 / /InputGroupButton /DropdownMenuTrigger DropdownMenuContent alignend DropdownMenuItemDocumentation/DropdownMenuItem DropdownMenuItemBlog Posts/DropdownMenuItem /DropdownMenuContent /DropdownMenu /InputGroupAddon /InputGroup9. Button Group按钮组前缀/后缀将ButtonGroup与 Input Group 结合可以在输入框两侧形成按钮前缀或后缀见 InputGroupWithButtonGroup.vue 与 ButtonGroupInputGroupDemo.vue。10. 自定义输入Custom Input若内置的InputGroupInput/InputGroupTextarea无法满足需求可以传入任意自定义元素只需为其添加data-slotinput-group-control属性即可自动获得输入组的焦点环与错误态联动同时不施加任何样式——样式完全由你自己的class控制template div classgrid w-full max-w-sm gap-6 InputGroup textarea >InputGroup InputGroupInput / InputGroupAddon / /InputGroup容器渲染为div>InputGroupAddon aligninline-end SearchIcon / /InputGroupAddon对齐规则速记InputGroupInput用inline-start/inline-endInputGroupTextarea用block-start/block-end。一个 Addon 内可以放置多个InputGroupButton与多个图标InputGroupAddon InputGroupButtonButton/InputGroupButton InputGroupButtonButton/InputGroupButton /InputGroupAddon对齐变体的完整样式定义见 index.tsinline-startorder-first pl-3并针对内部按钮/Kbd 做负外边距微调has-[button]:ml-[-0.45rem]inline-endorder-last pr-3对称处理block-start/block-endw-full justify-start分别以pt-3/pb-3贴合上下边缘textarea 场景下自动收紧group-has-[input]/input-group:pt-2.5。InputGroupButton输入组内的按钮实现见 InputGroupButton.vue底层渲染为通用Button。Prop类型默认值sizexs \| icon-xs \| sm \| icon-smxsvariantdefault \| destructive \| outline \| secondary \| ghost \| linkghostclassstring—InputGroupButton Button /InputGroupButton InputGroupButton sizeicon-xs aria-labelCopy CopyIcon / /InputGroupButtonInputGroupInput构建输入组时替代Input /的组件实现见 InputGroupInput.vue。已预置输入组样式并使用统一的data-slotinput-group-control参与焦点状态处理。Prop类型默认值classstring—其余 props 全部透传给底层Input /。InputGroup InputGroupInput placeholderEnter text... / InputGroupAddon SearchIcon / /InputGroupAddon /InputGroup其预置样式包括flex-1占满剩余宽度、rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0去边框去圆角让容器统一负责外观避免焦点环重复。InputGroupTextarea构建输入组时替代Textarea /的组件实现见 InputGroupTextarea.vue预置 textarea 输入组样式并复用data-slotinput-group-control。Prop类型默认值classstring—其余 props 透传给底层Textarea /。额外样式为resize-none禁止手动拉伸与py-3纵向内边距。InputGroup InputGroupTextarea placeholderEnter message... / InputGroupAddon alignblock-end InputGroupButtonSend/InputGroupButton /InputGroupAddon /InputGroup五、源码级原理data-slot 联动机制Input Group 最精巧的设计在于容器不依赖 JS仅凭 CSS 的has-*选择器 data-slot属性即可完成布局、焦点环、错误态的自动联动见 InputGroup.vue。1. 焦点状态自动高亮所有输入控件无论是内置的InputGroupInput/InputGroupTextarea还是自定义元素都带有data-slotinput-group-control。容器通过后代选择器感知焦点has-[[data-slotinput-group-control]:focus-visible]:border-ring has-[[data-slotinput-group-control]:focus-visible]:ring-ring/50 has-[[data-slotinput-group-control]:focus-visible]:ring-3即“当容器内存在:focus-visible的输入控件时”自动切换容器本身的边框颜色与 ring 光环形成聚焦的“整体感”——这正是搜索框聚焦时整组高亮的效果来源。2. 错误状态自动联动同样的思路用于校验错误展示has-[[data-slot][aria-invalidtrue]]:ring-destructive/20 has-[[data-slot][aria-invalidtrue]]:border-destructive dark:has-[[data-slot][aria-invalidtrue]]:ring-destructive/40只要输入控件带有aria-invalidtrue表单校验库如 VeeValidate、TanStack Form、Formisch 集成时的标准做法容器自动呈现红色错误边框与错误色 ring无需手动切换样式。仓库中的 VeeValidatePasswordDemo.vue、TanStackFormDemo.vue、FormischDemo.vue 等表单示例均依赖此机制。3. 对齐驱动的布局切换容器通过检查 Addon 的data-align属性动态调整内部布局检测到inline-start/inline-end时分别给input加pl-2/pr-2防止文字贴着 Addon检测到block-start/block-end时切换为纵向布局flex-col并调整输入框的pb-3/pt-3同时容器高度变为h-auto检测到 textarea 时has-[textarea]:h-auto同样放弃固定高度。4. 点击 Addon 聚焦输入框InputGroupAddon.vue 中定义了一个点击处理器当点击 Addon且点击目标不是内部按钮时自动在父容器中查找input并调用.focus()。这保证了用户点击前缀图标或后缀单位时光标会落回输入框交互更顺滑function handleInputGroupAddonClick(e: MouseEvent) { const target e.target as HTMLElement | null if (target target.closest(button)) return currentTarget?.parentElement?.querySelector(input)?.focus() }5. 禁用态视觉降级在 index.ts 的 Addon 变体中通过group-data-[disabledtrue]/input-group:opacity-50让data-disabled的容器内所有 Addon 半透明与 InputGroupWithSpinner.vue 中的禁用加载态配合使用。六、可访问性与实践建议顺序优先始终把输入控件写在 Addon 之前保证 Tab 键焦点顺序为“输入框 → 附加操作”避免焦点跳跃。语义标签纯装饰图标可搭配aria-hidden有操作含义的图标按钮务必提供aria-label如aria-labelCopy。错误提示配合表单校验库为输入控件设置aria-invalid错误态样式会自动生效无需额外逻辑。自定义控件任何自定义输入只需挂上data-slotinput-group-control即可接入整套联动样式完全自理通过class属性控制。扩展阅读完整示例可继续查看 apps/v4/components/demo 目录下的InputGroupWith*系列文件组件源码位于 apps/v4/registry/new-york-v4/ui/input-group是理解cva变体组织与has-*选择器用法的良好范本。赞分享UI组件前端【免费下载链接】shadcn-vueVue port of shadcn-ui项目地址https://gitcode.com/gh_mirrors/sh/shadcn-vue点击查看免费下载相关推荐把QQ空间历史说说完整存到本地GetQzonehistory实操指南把QQ空间历史说说完整存到本地GetQzonehistory实操指南 QQ空间开了这么多年你发的说说和照片却不在自己手里。GetQzonehistory 把网页爬虫数据分析Ant Design Input 组件完全指南从基础用法到源码级原理Ant Design Input 组件完全指南从基础用法到源码级原理 Ant Designantd的 Input 输入框是表单域的基础包装组件通过鼠标或前端UI组件设计系统ElementVue 2.0Switch 开关组件完全指南从基础用法到源码级实现ElementVue 2.0Switch 开关组件完全指南从基础用法到源码级实现 Element 是饿了么团队开源的 Vue.js 2.0 UI 组件库前端UI组件设计系统上一篇Repomix 快速上手将整个代码仓库打包为 AI 友好的单文件上下文下一篇Activepieces SCIM 2.0 Provisioning 深度解析企业 IdP 用户与 TEAM 项目自动同步创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考