Input Group

"use client"

import { IconSearch } from "@tabler/icons-react"

Installation#

pnpmnpmyarnbun
bunx --bun shadcn@latest add @ondo-ui/input-group
Copy

Usage#

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

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

Composition#

Use the following composition to build an InputGroup:

CopyInputGroup
├── InputGroupInput or InputGroupTextarea
├── InputGroupAddon
├── InputGroupButton
└── InputGroupText

Align#

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

inline-start#

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

import { IconSearch } from "@tabler/icons-react"

import {

inline-end#

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

import { IconEyeOff } from "@tabler/icons-react"

import {

block-start#

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

import { IconCopy, IconFileCode } from "@tabler/icons-react"

import {

block-end#

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

import {
  Field,
  FieldDescription,

Examples#

Size#

Use the size prop to scale the group. xs, sm, default, lg, xl, and 2xl. The control inside inherits the size, so the input's height and text scale with the group, and addon icons scale at xl and 2xl.

import { IconSearch } from "@tabler/icons-react"

import {

Icon#

"use client"

import {

Text#

"use client"

import {

Button#

"use client"

import * as React from "react"

Kbd#

"use client"

import { IconSearch } from "@tabler/icons-react"

Dropdown#

"use client"

import { IconChevronDown, IconDots } from "@tabler/icons-react"

Spinner#

"use client"

import { IconLoader } from "@tabler/icons-react"

Textarea#

"use client"

import {

Custom Input#

Add the data-slot="input-group-control" attribute to your custom input for automatic focus state handling.

"use client"

import {

API reference#

InputGroup#

The main component that wraps inputs and addons.

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

InputGroupAddon#

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

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#

Displays buttons within input groups.

The four named sizes match upstream shadcn exactly, so an example copied from those docs renders the same here.

Omit size and the button fits itself to the group instead, clearing the addon's padding — 20px in an xs group up to 40px in a 2xl one. In a default group that is identical to xs, so nothing moves; the scaled steps only exist for the group sizes upstream does not have. This adjusts height only, so an icon-only button still needs an explicit icon-xs or icon-sm.

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>