Shadcn Input Group for React

Installation

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

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

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

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

bun add tailwind-variants

npm install tailwind-variants

pnpm add tailwind-variants

yarn add tailwind-variants

"use client";

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

export const InputGroup = (props: React.ComponentProps<"div">) => {
  const { className, ...rest } = props;

  return (
    <div
      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