# 输入框组 · JGuang UI

> 组合输入框、前后缀和相关操作。

- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。

> 示例 `input-group-demo`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


## Installation


  

**Command**


  

**Manual**


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Copy and paste the following code into your project.


[View complete source: components/ui/input-group.tsx](/r/jguang-ui/radix/input-group.json)


### Update the import paths to match your project setup.


## Usage

```tsx showLineNumbers
import {
  InputGroup,
  InputGroupAddon,
  InputGroupButton,
  InputGroupInput,
  InputGroupText,
  InputGroupTextarea,
} from "@/components/ui/input-group"
```

```tsx showLineNumbers
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon />
  </InputGroupAddon>
</InputGroup>
```

## Composition

Use the following composition to build an `InputGroup`:

```text
InputGroup
├── InputGroupInput or InputGroupTextarea
├── InputGroupAddon
├── InputGroupButton
└── InputGroupText
```

## Align

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


  For proper focus management, `InputGroupAddon` should always be placed after
  `InputGroupInput` or `InputGroupTextarea` in the DOM. Use the `align` prop to
  visually position the addon.


### inline-start

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


> 示例 `input-group-inline-start`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


### inline-end

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


> 示例 `input-group-inline-end`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


### block-start

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


> 示例 `input-group-block-start`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


### block-end

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


> 示例 `input-group-block-end`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


## Icon


> 示例 `input-group-icon`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


## Text


> 示例 `input-group-text`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


## Button


> 示例 `input-group-button`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


## Kbd


> 示例 `input-group-kbd`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


## Dropdown


> 示例 `input-group-dropdown`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


## Spinner


> 示例 `input-group-spinner`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


## Textarea


> 示例 `input-group-textarea`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


## Custom Input

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.


> 示例 `input-group-custom`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> 示例 `input-group-rtl`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/input-group


## API Reference

### InputGroup

The main component that wraps inputs and addons.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

```tsx
<InputGroup>
  <InputGroupInput />
  <InputGroupAddon />
</InputGroup>
```

### InputGroupAddon

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

} title="Focus Navigation">
  For proper focus navigation, the `InputGroupAddon` component should be placed
  after the input. Set the `align` prop to position the addon.


| Prop        | Type                                                             | Default          |
| ----------- | ---------------------------------------------------------------- | ---------------- |
| `align`     | `"inline-start" \| "inline-end" \| "block-start" \| "block-end"` | `"inline-start"` |
| `className` | `string`                                                         |                  |

```tsx
<InputGroupAddon align="inline-end">
  <SearchIcon />
</InputGroupAddon>
```

**For ``, use the `inline-start` or `inline-end` alignment. For ``, use the `block-start` or `block-end` alignment.**

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

```tsx
<InputGroupAddon>
  <InputGroupButton>Button</InputGroupButton>
  <InputGroupButton>Button</InputGroupButton>
</InputGroupAddon>
```

### InputGroupButton

Displays buttons within input groups.

| Prop        | Type                                                                          | Default   |
| ----------- | ----------------------------------------------------------------------------- | --------- |
| `size`      | `"xs" \| "icon-xs" \| "sm" \| "icon-sm"`                                      | `"xs"`    |
| `variant`   | `"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link"` | `"ghost"` |
| `className` | `string`                                                                      |           |

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

### InputGroupInput

Replacement for `` 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.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

All other props are passed through to the underlying `` component.

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

### InputGroupTextarea

Replacement for `` 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.

| Prop        | Type     | Default |
| ----------- | -------- | ------- |
| `className` | `string` |         |

All other props are passed through to the underlying `` component.

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

## Changelog

### 2025-10-06 `InputGroup`

Add the `min-w-0` class to the `InputGroup` component. See [diff](/systems/jguang-ui#open-source-attribution).

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt