输入组

import {
  InputGroup,
  InputGroupAddon,

安装

🌐 Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add input-group
Copy

用法

🌐 Usage

Copyimport {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"

Copy<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

对齐

🌐 Align

在 InputGroupAddon 上使用 align 属性将附加组件相对于输入框定位。

🌐 Use the align prop on InputGroupAddon to position the addon relative to the input.

inline-start

使用 align="inline-start" 将插件定位在输入的开头。这是默认设置。

🌐 Use align="inline-start" to position the addon at the start of the input. This is the default.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import {
  InputGroup,

inline-end

使用 align="inline-end" 将插件定位在输入的末尾。

🌐 Use align="inline-end" to position the addon at the end of the input.

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import {
  InputGroup,

block-start

使用 align="block-start" 将插件定位在输入框上方。

🌐 Use align="block-start" to position the addon above the input.

import {
  Field,
  FieldDescription,

block-end

使用 align="block-end" 将插件放置在输入框下方。

🌐 Use align="block-end" to position the addon below the input.

import {
  Field,
  FieldDescription,

示例

🌐 Examples

图标

🌐 Icon

import {
  InputGroup,
  InputGroupAddon,

文本

🌐 Text

import {
  InputGroup,
  InputGroupAddon,

按钮

🌐 Button

"use client"

import * as React from "react"

键盘

🌐 Kbd

import {
  InputGroup,
  InputGroupAddon,

下拉菜单

🌐 Dropdown

import {
  DropdownMenu,
  DropdownMenuContent,

旋转器

🌐 Spinner

import {
  InputGroup,
  InputGroupAddon,

文本区域

🌐 Textarea

import {
  InputGroup,
  InputGroupAddon,

自定义输入

🌐 Custom Input

将 data-slot="input-group-control" 属性添加到你的自定义输入中，以自动处理焦点状态。

🌐 Add the data-slot="input-group-control" attribute to your custom input for automatic focus state handling.

这是一个来自第三方库的可自定义可调整大小的文本区域示例。

🌐 Here's an example of a custom resizable textarea from a third-party library.

"use client"

import {

从右到左

🌐 RTL

要在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

import * as React from "react"

API参考

🌐 API Reference

InputGroup

封装输入和附加组件的主要组件。

🌐 The main component that wraps inputs and addons.

Copy<InputGroup>
  <InputGroupInput />
  <InputGroupAddon />
</InputGroup>

InputGroupAddon

在输入项旁显示图标、文本、按钮或其他内容。

🌐 Displays icons, text, buttons, or other content alongside inputs.

Copy<InputGroupAddon align="inline-end">
  <SearchIcon />
</InputGroupAddon>

对于 <InputGroupInput />，使用 inline-start 或 inline-end 对齐方式。对于 <InputGroupTextarea />，使用 block-start 或 block-end 对齐方式。

InputGroupAddon 组件可以包含多个 InputGroupButton 组件和图标。

🌐 The InputGroupAddon component can have multiple InputGroupButton components and icons.

Copy<InputGroupAddon>
  <InputGroupButton>Button</InputGroupButton>
  <InputGroupButton>Button</InputGroupButton>
</InputGroupAddon>

InputGroupButton

在输入组中显示按钮。

🌐 Displays buttons within input groups.

Copy<InputGroupButton>Button</InputGroupButton>
<InputGroupButton size="icon-xs" aria-label="Copy">
  <CopyIcon />
</InputGroupButton>

InputGroupInput

在构建输入组时替代 <Input />。该组件预先应用了输入组样式，并使用统一的 data-slot="input-group-control" 来处理焦点状态。

🌐 Replacement for <Input /> when building input groups. This component has the input group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.

所有其他属性都传递给底层的 <Input /> 组件。

🌐 All other props are passed through to the underlying <Input /> component.

Copy<InputGroup>
  <InputGroupInput placeholder="Enter text..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

InputGroupTextarea

在构建输入组时用于替换 <Textarea />。该组件预先应用了多行文本框组的样式，并使用统一的 data-slot="input-group-control" 来处理聚焦状态。

🌐 Replacement for <Textarea /> when building input groups. This component has the textarea group styles pre-applied and uses the unified data-slot="input-group-control" for focus state handling.

所有其他属性都传递给底层的 <Textarea /> 组件。

🌐 All other props are passed through to the underlying <Textarea /> component.

Copy<InputGroup>
  <InputGroupTextarea placeholder="Enter message..." />
  <InputGroupAddon align="block-end">
    <InputGroupButton>Send</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

更新日志

🌐 Changelog

2025-10-06 InputGroup

将 min-w-0 类添加到 InputGroup 组件。请参见 diff。

🌐 Add the min-w-0 class to the InputGroup component. See diff.