介绍

开始使用

表单

注册表

输入组

为输入框添加附加信息、按钮和辅助内容。

12 results

import {
  InputGroup,
  InputGroupAddon,

安装


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>

对齐

使用 InputGroupAddon 组件的 align 属性来相对于输入框定位附加内容。

为了正确的焦点管理，InputGroupAddon 应始终放置在 InputGroupInput 或 InputGroupTextarea 之后。使用 align 属性实现视觉定位。

inline-start

使用 align="inline-start" 将附加内容定位在输入框开始位置。这是默认值。

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

inline-end

使用 align="inline-end" 将附加内容定位在输入框末尾。

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

block-start

使用 align="block-start" 将附加内容定位在输入框上方。

import {
  Field,
  FieldDescription,

block-end

使用 align="block-end" 将附加内容定位在输入框下方。

import {
  Field,
  FieldDescription,

示例

图标

import {
  InputGroup,
  InputGroupAddon,

文字

在输入框旁显示附加文本信息。

USD

https://

.com

@company.com

120 characters left

import {
  InputGroup,
  InputGroupAddon,

按钮

在输入组中添加按钮以执行操作。

https://

"use client"

import * as React from "react"

Kbd

⌘K

import {
  InputGroup,
  InputGroupAddon,

下拉菜单

将输入组与下拉菜单结合，支持复杂交互。

import {
  DropdownMenu,
  DropdownMenuContent,

加载指示器

处理输入时显示加载旋转器。

Saving...

Please wait...

import {
  InputGroup,
  InputGroupAddon,

文本域

输入组同样支持文本域组件。使用 block-start 或 block-end 进行对齐。

Line 1, Column 1

script.js

import {
  InputGroup,
  InputGroupAddon,

自定义输入

给你的自定义输入添加 data-slot="input-group-control" 属性，实现自动行为和聚焦状态处理。

以下是使用第三方库的自适应高度文本域的示例。

"use client"

import {

import { InputGroup, InputGroupAddon } from "@/component/ui/input-group"
import TextareaAutosize from "react-textarea-autosize"
 
export function InputGroupCustom() {
  return (
    <InputGroup>
      <TextareaAutosize
        data-slot="input-group-control"
        className="dark:bg-input/30 flex field-sizing-content min-h-16 w-full resize-none rounded-md bg-transparent px-3 py-2 text-base transition-[color,box-shadow] outline-none"
        placeholder="自动调整高度文本域..."
      />
      <InputGroupAddon align="block-end">how</InputGroupAddon>
    </InputGroup>
  )
}

API 参考

InputGroup

包裹输入和附加内容的主组件。

属性	类型	默认值
`className`	`string`

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

InputGroupAddon

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

焦点导航

为了正确的焦点导航，InputGroupAddon 组件应放置在输入框之后。通过设置 align 属性来定位附加内容。

属性	类型	默认值
`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>按钮</InputGroupButton>
  <InputGroupButton>按钮</InputGroupButton>
</InputGroupAddon>

InputGroupButton

在输入组内显示按钮。

属性	类型	默认值
`size`	`"xs" \| "icon-xs" \| "sm" \| "icon-sm"`	`"xs"`
`variant`	`"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"`	`"ghost"`
`className`	`string`

<InputGroupButton>按钮</InputGroupButton>
<InputGroupButton size="icon-xs" aria-label="复制">
  <CopyIcon />
</InputGroupButton>

InputGroupInput

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

属性	类型	默认值
`className`	`string`

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

<InputGroup>
  <InputGroupInput placeholder="请输入内容..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>

InputGroupTextarea

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

属性	类型	默认值
`className`	`string`

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

<InputGroup>
  <InputGroupTextarea placeholder="输入消息..." />
  <InputGroupAddon align="block-end">
    <InputGroupButton>发送</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

更新日志

2025-10-06 `InputGroup`

给 InputGroup 组件添加了 min-w-0 类。详情参见 diff。

输入输入 OTP

输入组

安装

用法

对齐