Input Group - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/input-group

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

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

<InputGroup>
  <span>$</span>
  <Input type="number" />
  <Button>Submit</Button>
</InputGroup>

Examples

With Icons

Input groups with icon addons.

With Button

Input group with action button.

With Textarea

Textarea with addon button.

API Reference

Prop	Type	Default	Description
`children`	`React.ReactNode`	—	Input and addon elements.

⌘K

USD