║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Input Group description: A group of connected input fields that appear as a single visual unit. preview: true links: doc: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input api: /docs/components/input-group#api-reference

<ComponentTabs name="input-group-demo" />

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/input-group"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 class-variance-authority
 ```

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource name="input-group" />

</Step> </Steps>

Layout

Import the component and use it with different position props.

import { InputGroup, InputGroupItem } from "@/components/ui/input-group";

<InputGroup>
  <InputGroupItem position="first" placeholder="First" />
  <InputGroupItem position="middle" placeholder="Middle" />
  <InputGroupItem position="last" placeholder="Last" />
</InputGroup>

Examples

Form Input

Use grouped inputs for structured form data like phone numbers or addresses.

<ComponentTabs name="input-group-form-demo" />

RGB Color Input

Create color input controls using grouped inputs for RGB values.

<ComponentTabs name="input-group-rgb-demo" />

Vertical Layout

Display input groups in a vertical orientation.

<ComponentTabs name="input-group-vertical-demo" />

API Reference

InputGroup

The main input group container component.

<AutoTypeTable path="./types/docs/input-group.ts" name="InputGroupRootProps" />

InputGroupItem

Individual input items within the input group.

<AutoTypeTable path="./types/docs/input-group.ts" name="InputGroupItemProps" />

The component supports all standard HTML input attributes and properties from the base Input component, plus the following:

• position: Controls the visual positioning and borders of the input within a group
  • first: Removes right border radius, maintains left border
  • middle: Removes all border radius, removes left border to prevent doubling
  • last: Removes left border radius, removes left border to prevent doubling
  • isolated: Normal input styling (default)

Styling

The component automatically handles:

• Border radius removal for seamless connection
• Border overlap prevention with negative margins
• Focus ring z-index management
• Webkit number input spinner removal
• Firefox number input appearance normalization

Accessibility

The InputGroup component follows standard web accessibility practices. Users navigate between inputs using Tab and Shift+Tab keys, which is the expected behavior for form controls.

Keyboard Interactions

<KeyboardShortcutsTable shortcuts={[ { keys: ["Tab"], description: "Moves focus to the next input in the group.", }, { keys: ["Shift", "Tab"], description: "Moves focus to the previous input in the group.", }, ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║