Input Group

Composable input surfaces. Default is Inset (nested), with an optional Elevated variant for standalone focus.

Basic Usage

⌘K

Default (Inset)

Use inside Cards / forms to avoid double elevation.

Elevated

Use when the input itself is the focus surface.

CtrlK

Message

Domain

.com

Comment

Avoid stacking Elevated surfaces inside another Elevated container.

❌ Nested Elevated

✅ Nested Inset

Component

Notes

InputGroup

Container that owns the surface; supports variant (default/elevated) and size.

InputGroupInput

Input control (inherits size).

InputGroupTextarea

Textarea control (block layout).

InputGroupAddon

Slots for icons, text, or actions. Use align to switch inline/block placement.

InputGroupButton

Pre-sized button for compact actions inside addons.

InputGroupText

Inline text helper (suffix/prefix).