Input Group

An input with things attached — a leading icon, a fixed suffix, a button, a keyboard hint. The group draws one border and one focus ring around all of it.

tsx

1import {
2  InputGroup,
3  InputGroupAddon,
4  InputGroupInput,
5  InputGroupButton,
6  InputGroupText,
7} from "@pestoui/core"

Inline addons

An addon sits at the start by default; align="inline-end" moves it to the far side. Clicking an addon focuses the input.

.example.com

/

Textarea with a footer

block-end turns the addon into a row under the control, and the group grows to fit. The usual shape for a prompt box.

Shift + Enter for a new line

Props

Prop	Type	Default	Description
align	"inline-start" \| "inline-end" \| "block-start" \| "block-end"	"inline-start"	On InputGroupAddon. Before or after the control on its row, or as a full-width row above or below it.
size	"xs" \| "sm" \| "icon-xs" \| "icon-sm"	"xs"	On InputGroupButton. Sized to sit inside the 44px group.
variant	Button["variant"]	"ghost"	On InputGroupButton.
aria-invalid	boolean	—	On InputGroupInput or InputGroupTextarea. The group's border and ring turn destructive.
disabled	boolean	—	On InputGroupInput or InputGroupTextarea. Dims the whole group.

PreviousInput Next Input OTP

Pesto UI · 117 documented components