mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-22 12:15:43 +00:00
3e20c228da
* fix(input-group-textarea): prevent child elements from overflowing by adding min-w-0 * chore: run registry:build --------- Co-authored-by: shadcn <m@shadcn.com>
262 lines
7.0 KiB
Plaintext
262 lines
7.0 KiB
Plaintext
---
|
|
title: Input Group
|
|
description: Display additional information or actions to an input or textarea.
|
|
component: true
|
|
---
|
|
|
|
import { IconInfoCircle } from "@tabler/icons-react"
|
|
|
|
<ComponentPreview name="input-group-demo" className="[&_.preview]:p-4" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTrigger value="cli">CLI</TabsTrigger>
|
|
<TabsTrigger value="manual">Manual</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add input-group
|
|
```
|
|
|
|
</TabsContent>
|
|
|
|
<TabsContent value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="input-group" title="components/ui/input-group.tsx" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsContent>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx showLineNumbers
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupButton,
|
|
InputGroupInput,
|
|
InputGroupText,
|
|
InputGroupTextarea,
|
|
} from "@/components/ui/input-group"
|
|
```
|
|
|
|
```tsx showLineNumbers
|
|
<InputGroup>
|
|
<InputGroupInput placeholder="Search..." />
|
|
<InputGroupAddon>
|
|
<SearchIcon />
|
|
</InputGroupAddon>
|
|
<InputGroupAddon align="inline-end">
|
|
<InputGroupButton>Search</InputGroupButton>
|
|
</InputGroupAddon>
|
|
</InputGroup>
|
|
```
|
|
|
|
## Examples
|
|
|
|
### Icon
|
|
|
|
<ComponentPreview name="input-group-icon" className="[&_.preview]:p-4" />
|
|
|
|
### Text
|
|
|
|
Display additional text information alongside inputs.
|
|
|
|
<ComponentPreview name="input-group-text" className="[&_.preview]:p-4" />
|
|
|
|
### Button
|
|
|
|
Add buttons to perform actions within the input group.
|
|
|
|
<ComponentPreview name="input-group-button" className="[&_.preview]:p-4" />
|
|
|
|
### Tooltip
|
|
|
|
Add tooltips to provide additional context or help.
|
|
|
|
<ComponentPreview name="input-group-tooltip" className="[&_.preview]:p-4" />
|
|
|
|
### Textarea
|
|
|
|
Input groups also work with textarea components. Use `block-start` or `block-end` for alignment.
|
|
|
|
<ComponentPreview name="input-group-textarea" className="[&_.preview]:p-4" />
|
|
|
|
### Spinner
|
|
|
|
Show loading indicators while processing input.
|
|
|
|
<ComponentPreview name="input-group-spinner" className="[&_.preview]:p-4" />
|
|
|
|
### Label
|
|
|
|
Add labels within input groups to improve accessibility.
|
|
|
|
<ComponentPreview name="input-group-label" className="[&_.preview]:p-4" />
|
|
|
|
### Dropdown
|
|
|
|
Pair input groups with dropdown menus for complex interactions.
|
|
|
|
<ComponentPreview name="input-group-dropdown" className="[&_.preview]:p-4" />
|
|
|
|
### Button Group
|
|
|
|
Wrap input groups with button groups to create prefixes and suffixes.
|
|
|
|
<ComponentPreview
|
|
name="input-group-button-group"
|
|
className="[&_.preview]:p-4"
|
|
/>
|
|
|
|
### Custom Input
|
|
|
|
Add the `data-slot="input-group-control"` attribute to your custom input for automatic behavior and focus state handling.
|
|
|
|
No style is applied to the custom input. Apply your own styles using the `className` prop.
|
|
|
|
<ComponentPreview
|
|
name="input-group-custom"
|
|
className="!mb-4 [&_.preview]:p-4"
|
|
/>
|
|
|
|
```tsx showLineNumbers
|
|
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="Autoresize textarea..."
|
|
/>
|
|
<InputGroupAddon align="block-end">how</InputGroupAddon>
|
|
</InputGroup>
|
|
)
|
|
}
|
|
```
|
|
|
|
## 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.
|
|
|
|
<Callout icon={<IconInfoCircle />} title="Focus Navigation">
|
|
For proper focus navigation, the `InputGroupAddon` component should be placed
|
|
after the input. Set the `align` prop to position the addon.
|
|
</Callout>
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | ---------------------------------------------------------------- | ---------------- |
|
|
| `align` | `"inline-start" \| "inline-end" \| "block-start" \| "block-end"` | `"inline-start"` |
|
|
| `className` | `string` | |
|
|
|
|
```tsx
|
|
<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.
|
|
|
|
```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 `<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.
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | -------- | ------- |
|
|
| `className` | `string` | |
|
|
|
|
All other props are passed through to the underlying `<Input />` component.
|
|
|
|
```tsx
|
|
<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.
|
|
|
|
| Prop | Type | Default |
|
|
| ----------- | -------- | ------- |
|
|
| `className` | `string` | |
|
|
|
|
All other props are passed through to the underlying `<Textarea />` 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](https://github.com/shadcn-ui/ui/pull/8341/files#diff-0e2ee95d0050ca4c5d82339df86c54e14a6739dc4638fdda0eec8f73aebc2da9).
|