Components

Input Group

Mixed (Input wrapper)

Combine inputs with icons, text, or buttons for enhanced UX.

With Icon

Add an icon before or after the input.

With Text Addon

Add text before and after for currency or units.

$
.00

With Button

Attach a button directly to the input.

With Textarea

Use with textarea for multiline input.

Installation

npx shadcn-svelte@latest add input-group

API Reference

Components

Component
Description
InputGroup.Root
Container wrapper
InputGroup.Input
Input element
InputGroup.Textarea
Textarea element
InputGroup.Addon
Icon/text/button container
InputGroup.Text
Text addon
InputGroup.Button
Button addon

Documentation

For more information, see the official shadcn-svelte documentation.