Input Group

Input with attached adornments or buttons.

Leading icon

<InputGroup>
  <InputGroupAddon><Search className="size-4" /></InputGroupAddon>
  <InputGroupInput placeholder="Search components" />
</InputGroup>

Leading icon + trailing button

Actionable input. The button sits inside the field and reads as part of the control.

<InputGroup>
  <InputGroupAddon><Mail className="size-4" /></InputGroupAddon>
  <InputGroupInput type="email" placeholder="you@example.com" />
  <InputGroupAddon align="inline-end">
    <InputGroupButton size="sm" variant="default"><Send /> Send</InputGroupButton>
  </InputGroupAddon>
</InputGroup>

Prefix and suffix text

Use InputGroupText for read-only labels that frame the input value.

https://

.smallerearth.com

<InputGroup>
  <InputGroupAddon><InputGroupText>https://</InputGroupText></InputGroupAddon>
  <InputGroupInput placeholder="yoursite" />
  <InputGroupAddon align="inline-end">
    <InputGroupText>.smallerearth.com</InputGroupText>
  </InputGroupAddon>
</InputGroup>

Card number with helper

Block-end addon stacks a helper row below the input without breaking the single control feel.

Visa, Mastercard, Amex

<InputGroup>
  <InputGroupAddon><CreditCard className="size-4" /></InputGroupAddon>
  <InputGroupInput placeholder="Card number" />
  <InputGroupAddon align="block-end" className="border-t">
    <InputGroupText className="text-muted-foreground">Visa, Mastercard, Amex</InputGroupText>
  </InputGroupAddon>
</InputGroup>

Textarea with toolbar

InputGroupTextarea pairs with block-end toolbars for editor affordances.

Markdown supported

<InputGroup>
  <InputGroupTextarea placeholder="Write a message..." />
  <InputGroupAddon align="block-end" className="border-t">
    <InputGroupText className="text-xs text-muted-foreground">Markdown supported</InputGroupText>
    <InputGroupButton size="sm" variant="default" className="ml-auto">Send</InputGroupButton>
  </InputGroupAddon>
</InputGroup>