Shadcn Input Group for React

Installation

bunx --bun shadcn@latest add https://kit.dev/r/aria/input-group.json

npx shadcn@latest add https://kit.dev/r/aria/input-group.json

pnpm dlx shadcn@latest add https://kit.dev/r/aria/input-group.json

yarn shadcn@latest add https://kit.dev/r/aria/input-group.json

bun add react-aria-components tailwind-variants

npm install react-aria-components tailwind-variants

pnpm add react-aria-components tailwind-variants

yarn add react-aria-components tailwind-variants

"use client";

import type React from "react";
import { Group, type GroupProps } from "react-aria-components";
import { tv, type VariantProps } from "tailwind-variants";
import { cn } from "@/lib/utils";
import { Button } from "@/registry/aria/components/button";
import { Input } from "@/registry/aria/components/input";
import { Textarea } from "@/registry/aria/components/textarea";

export const InputGroup = (props: GroupProps) => {
  const { className, ...rest } = props;

  return (
    <Group
      className={cn(
        "group/input-group cn-input-group relative flex w-full min-w-0 items-center outline-none has-[>textarea]:h-auto",
        className

Usage

import { SearchIcon } from "lucide-react";
import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
} from "@/components/ui/input-group";

<InputGroup className="max-w-xs">
  <InputGroupInput placeholder="Search..." />
  <InputGroupAddon>
    <SearchIcon aria-hidden="true" />
  </InputGroupAddon>
  <InputGroupAddon align="inline-end">12 results</InputGroupAddon>
</InputGroup>

Accessibility

Demos

Inline Start

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

Inline End

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

Block Start

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

Block End

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

Icon

Icons inside input group addons.

Text

Text addons for currency, URLs, and character counts.

Button

Buttons inside input group addons, including copy and popover actions.

Kbd

Keyboard shortcut hint with Kbd in an addon.

Dropdown

Menu actions inside input group addons.

Spinner

Loading spinners inside input group addons.

Textarea

Textarea with block-start and block-end addons.

Custom

Custom control with data-slot="input-group-control" for focus styles.

Rtl

Right-to-left input group. See the RTL configuration guide for document direction.

API Reference