import { Search } from "lucide-react"
import {安装#
pnpm dlx shadcn@latest add input-group
用法#
import {
InputGroup,
InputGroupAddon,
InputGroupButton,
InputGroupInput,
InputGroupText,
InputGroupTextarea,
} from "@/components/ui/input-group"<InputGroup>
<InputGroupInput placeholder="搜索..." />
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
</InputGroup>组合#
使用以下组合构建一个 InputGroup：
InputGroup
├── InputGroupInput or InputGroupTextarea
├── InputGroupAddon
├── InputGroupButton
└── InputGroupText对齐#
在 InputGroupAddon 上使用 align 属性，将附加内容相对于输入框进行定位。
为了正确管理焦点，InputGroupAddon 应始终在 DOM 中放置于
InputGroupInput 或 InputGroupTextarea 之后。使用 align 属性来
视觉上定位附加内容。
inline-start#
使用 align="inline-start" 将附加内容定位在输入框的起始位置。这是默认值。
Icon positioned at the start.
import { SearchIcon } from "lucide-react"
import {inline-end#
使用 align="inline-end" 将附加内容定位在输入框的末尾。
Icon positioned at the end.
import { EyeOffIcon } from "lucide-react"
import {block-start#
使用 align="block-start" 将附加内容定位在输入框上方。
Header positioned above the input.
Header positioned above the textarea.
import { CopyIcon, FileCodeIcon } from "lucide-react"
import {block-end#
使用 align="block-end" 将附加内容定位在输入框下方。
Footer positioned below the input.
Footer positioned below the textarea.
import {
Field,
FieldDescription,图标#
import {
CheckIcon,
CreditCardIcon,文本#
import {
InputGroup,
InputGroupAddon,按钮#
"use client"
import * as React from "react"键盘#
import { SearchIcon } from "lucide-react"
import {下拉菜单#
"use client"
import { ChevronDownIcon, MoreHorizontal } from "lucide-react"微调器#
import { LoaderIcon } from "lucide-react"
import {文本区域#
import {
IconBrandJavascript,
IconCopy,自定义输入#
为您的自定义输入添加 data-slot="input-group-control" 属性，以便自动处理焦点状态。
以下是一个来自第三方库的自定义可调整大小的文本区域示例。
"use client"
import TextareaAutosize from "react-textarea-autosize"RTL#
要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。
تذييل موضع أسفل منطقة النص.
"use client"
import * as React from "react"API 参考#
InputGroup#
包裹输入框和附加内容的主要组件。
| Prop | Type | Default |
|---|---|---|
className | string |
<InputGroup>
<InputGroupInput />
<InputGroupAddon />
</InputGroup>InputGroupAddon#
用于在输入框旁显示图标、文本、按钮或其他内容。
为了实现正确的焦点导航，应将
InputGroupAddon 组件放置在输入框之后。设置 align prop 来定位附加内容。
| Prop | Type | Default |
|---|---|---|
align | "inline-start" | "inline-end" | "block-start" | "block-end" | "inline-start" |
className | string |
<InputGroupAddon align="inline-end">
<SearchIcon />
</InputGroupAddon>对于 <InputGroupInput />，使用 inline-start 或 inline-end 对齐方式。对于 <InputGroupTextarea />，使用 block-start 或 block-end 对齐方式。
InputGroupAddon 组件可以包含多个 InputGroupButton 组件和图标。
<InputGroupAddon>
<InputGroupButton>Button</InputGroupButton>
<InputGroupButton>Button</InputGroupButton>
</InputGroupAddon>InputGroupButton#
用于在输入组中显示按钮。
| Prop | Type | Default |
|---|---|---|
size | "xs" | "icon-xs" | "sm" | "icon-sm" | "xs" |
variant | "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "ghost" |
className | string |
<InputGroupButton>Button</InputGroupButton>
<InputGroupButton size="icon-xs" aria-label="Copy">
<CopyIcon />
</InputGroupButton>InputGroupInput#
构建输入组时用于替代 <Input />。此组件已预先应用输入组样式，并使用统一的 data-slot="input-group-control" 处理焦点状态。
| Prop | Type | Default |
|---|---|---|
className | string |
所有其他 prop 都会传递给底层的 <Input /> 组件。
<InputGroup>
<InputGroupInput placeholder="Enter text..." />
<InputGroupAddon>
<SearchIcon />
</InputGroupAddon>
</InputGroup>InputGroupTextarea#
构建输入组时用于替代 <Textarea />。此组件已预先应用文本区域组样式，并使用统一的 data-slot="input-group-control" 处理焦点状态。
| Prop | Type | Default |
|---|---|---|
className | string |
所有其他 prop 都会传递给底层的 <Textarea /> 组件。
<InputGroup>
<InputGroupTextarea placeholder="Enter message..." />
<InputGroupAddon align="block-end">
<InputGroupButton>Send</InputGroupButton>
</InputGroupAddon>
</InputGroup>