Input Group

Installation

›pnpm dlx shadcn@latest add @evolphin/input-group

Usage

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

<InputGroup>
  <InputGroupAddon>
    <Mail className="h-4 w-4" />
  </InputGroupAddon>
  <InputGroupInput placeholder="Email" />
</InputGroup>

Type Definitions

interface InputGroupAddonProps {
  /** The alignment of the addon */
  align?: "inline-start" | "inline-end" | "block-start" | "block-end";  
InputGroupAddonProps.align?: "inline-start" | "inline-end" | "block-start" | "block-end" | undefined
The alignment of the addon
}

Examples

With Icon

With Text Addon

https://

With Button

Copy Button

Block Alignment (Textarea)

Description

API Reference

InputGroup

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

InputGroupAddon

Prop	Type	Default	Description
`align`	`"inline-start" \	"inline-end" \	"block-start" \
`className`	`string`	-	Additional CSS classes

InputGroupInput

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

InputGroupTextarea

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

InputGroupButton

Prop	Type	Default	Description
`size`	`"xs" \	"sm" \	"icon-xs" \
`variant`	`"default" \	"outline" \	"ghost" \
`className`	`string`	-	Additional CSS classes

InputGroupText

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

Search

On this page