Input Group

import {
  InputGroup,
  InputGroupAddon,

安装

pnpmnpmyarnbun
pnpm dlx shadcn@latest add input-group
复制

用法

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

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

对齐

使用 InputGroupAddon 上的 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,

文本

import {
  InputGroup,
  InputGroupAddon,

按钮

"use client"

import * as React from "react"

Kbd

import {
  InputGroup,
  InputGroupAddon,

下拉菜单

import {
  DropdownMenu,
  DropdownMenuContent,

加载指示器

import {
  InputGroup,
  InputGroupAddon,

文本域

import {
  InputGroup,
  InputGroupAddon,

自定义输入

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

下面是一个来自第三方库的可调整大小文本域示例。

"use client"

import {

RTL

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

"use client"

import * as React from "react"

API 参考

InputGroup

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

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

InputGroupAddon

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

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

For <InputGroupInput />, use the inline-start or inline-end alignment. For <InputGroupTextarea />, use the block-start or block-end alignment.

The InputGroupAddon component can have multiple InputGroupButton components and icons.

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

InputGroupButton

在输入组中显示按钮。

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

InputGroupInput

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.

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

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

InputGroupTextarea

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.

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>