Input Group

A compound input component for attaching icons, text labels, and action buttons to an input field.

Installation

pnpm dlx stera-ui add input-group

Usage

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
  InputGroupButton,
  InputGroupTextarea,
} from "@/components/ui/input-group"
<InputGroup>
  <InputGroupAddon align="inline-start">
    <SiSearch />
  </InputGroupAddon>
  <InputGroupInput placeholder="Search..." />
</InputGroup>

Text Addons

$
USD
https://
@company.com

With Button

https://

With Kbd

⌘K

Sizes

SizeDescription
smSmall
mdMedium (default)
lgLarge
xlExtra large

Textarea

Line 1, Column 1

With Label

https://

Your public-facing URL.

API Reference

InputGroupAddon

PropTypeDescription
align"inline-start" | "inline-end" | "block-start" | "block-end"Position relative to the input

Subcomponents

ComponentDescription
InputGroupInputThe text input — accepts all Input props including size
InputGroupTextareaA textarea variant of the input control
InputGroupTextPlain text label inside an addon
InputGroupButtonButton inside an addon — accepts all Button props