mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-06-22 20:25:44 +00:00
38de7fddc2
* feat: rtl * feat * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * feat: add sidebar * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * chore: changeset * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix * fix
307 lines
6.8 KiB
Plaintext
307 lines
6.8 KiB
Plaintext
---
|
|
title: Input Group
|
|
description: Add addons, buttons, and helper content to inputs.
|
|
base: base
|
|
component: true
|
|
---
|
|
|
|
import { IconInfoCircle } from "@tabler/icons-react"
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-demo"
|
|
previewClassName="h-[26rem]"
|
|
/>
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTrigger value="cli">Command</TabsTrigger>
|
|
<TabsTrigger value="manual">Manual</TabsTrigger>
|
|
</TabsList>
|
|
<TabsContent value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add input-group
|
|
```
|
|
|
|
</TabsContent>
|
|
|
|
<TabsContent value="manual">
|
|
|
|
<Steps className="mb-0 pt-2">
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource
|
|
name="input-group"
|
|
title="components/ui/input-group.tsx"
|
|
styleName="base-nova"
|
|
/>
|
|
|
|
<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>
|
|
</InputGroup>
|
|
```
|
|
|
|
## Align
|
|
|
|
Use the `align` prop on `InputGroupAddon` to position the addon relative to the input.
|
|
|
|
<Callout>
|
|
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.
|
|
</Callout>
|
|
|
|
### inline-start
|
|
|
|
Use `align="inline-start"` to position the addon at the start of the input. This is the default.
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-inline-start"
|
|
previewClassName="h-48"
|
|
/>
|
|
|
|
### inline-end
|
|
|
|
Use `align="inline-end"` to position the addon at the end of the input.
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-inline-end"
|
|
previewClassName="h-48"
|
|
/>
|
|
|
|
### block-start
|
|
|
|
Use `align="block-start"` to position the addon above the input.
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-block-start"
|
|
previewClassName="h-96"
|
|
/>
|
|
|
|
### block-end
|
|
|
|
Use `align="block-end"` to position the addon below the input.
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-block-end"
|
|
previewClassName="h-[26rem]"
|
|
/>
|
|
|
|
## Examples
|
|
|
|
### Icon
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-icon"
|
|
previewClassName="h-80"
|
|
/>
|
|
|
|
### Text
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-text"
|
|
previewClassName="h-80"
|
|
/>
|
|
|
|
### Button
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-button"
|
|
previewClassName="h-72"
|
|
/>
|
|
|
|
### Kbd
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-kbd"
|
|
previewClassName="h-40"
|
|
/>
|
|
|
|
### Dropdown
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-dropdown"
|
|
previewClassName="h-56"
|
|
/>
|
|
|
|
### Spinner
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-spinner"
|
|
previewClassName="h-80"
|
|
/>
|
|
|
|
### Textarea
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-textarea"
|
|
previewClassName="h-96"
|
|
/>
|
|
|
|
### 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.
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-custom"
|
|
previewClassName="h-56"
|
|
/>
|
|
|
|
## RTL
|
|
|
|
To enable RTL support in shadcn/ui, see the [RTL configuration guide](/docs/rtl).
|
|
|
|
<ComponentPreview
|
|
styleName="base-nova"
|
|
name="input-group-rtl"
|
|
direction="rtl"
|
|
previewClassName="h-[30rem]"
|
|
/>
|
|
|
|
## 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>
|
|
```
|