advanced

Input Group

Input with prefix/suffix addons.

Preview

A preview of the Input Group component with interactive controls.

Preview Code
https://
Interactive

Installation

Add the Input Group component to your project.

Bash
ng g @ng-cn/core:c input-group

Usage

Import and use the Input Group component in your Angular application.

Template TypeScript
template.html
<div class="space-y-4 w-full max-w-sm">
  <InputGroup>
    <InputGroupAddon>
      <lucide-icon name="search" class="h-4 w-4 text-muted-foreground" />
    </InputGroupAddon>
    <Input placeholder="Search..." />
  </InputGroup>

  <InputGroup>
    <InputGroupAddon>https://</InputGroupAddon>
    <Input placeholder="example.com" />
  </InputGroup>

  <InputGroup>
    <InputGroupAddon>
      <lucide-icon name="at-sign" class="h-4 w-4 text-muted-foreground" />
    </InputGroupAddon>
    <Input placeholder="username" />
  </InputGroup>
</div>

Examples

Explore different variations and use cases for the Input Group component.

Basic

Preview Code
Interactive

API Reference

Props
Prop Type Default Description
class string — Additional CSS classes.