Input Group
A flexible input group that combines inputs with addons, prefixes, and suffixes to improve usability. Built using modular directives for maximum flexibility.
Default & Composition
Combine search icons, helper text, and status indicators with standard inputs.
Button Group Integration
Combine the input group with hlmButtonGroup for complex URL or path builders.
Action Buttons
Incorporate interactive buttons for actions like copying, favoriting, or triggering popovers.
Custom Controls
Use custom controls like auto-resizing textareas within the input group.
Dropdown Menus
Embed dropdown triggers directly into your input groups for filtering or extra options.
Reactive Forms
Full integration with Angular Reactive Forms, including validation states and tooltips.
Icon Decoration
Decorate your inputs with semantic icons to provide better visual context.
Text Labels
Use hlmLabel inside addons for currency symbols, units, or prefixes.
Loading States
Provide immediate feedback for async operations like searching or saving.
Text Addons
Add static text blocks as prefixes or suffixes using hlmInputGroupText.
Helpful Tooltips
Add descriptive tooltips to buttons or icons for complex field requirements.
Textarea & Chat Layout
Create advanced interaction zones like AI prompts or comment boxes using hlmInputGroupTextarea.
AI may generate inaccurate info. Check important facts.
API Reference
The Input Group component consists of several directives that work together to create styled input layouts.
Helm API
| Directive | Selector | Description |
|---|---|---|
| HlmInputGroup | [hlmInputGroup] | Main container that manages layout and focus states. |
| HlmInputGroupAddon | [hlmInputGroupAddon] | Container for addons. Supports align="inline-start | inline-end | block-start | block-end". |
| HlmInputGroupInput | [hlmInputGroupInput] | Directive for the input element within the group. |
| HlmInputGroupText | [hlmInputGroupText] | Styles text content inside an addon. |
| HlmInputGroupButton | [hlmInputGroupButton] | Styles buttons within the group. |
| HlmInputGroupTextarea | [hlmInputGroupTextarea] | Directive for textarea elements within the group. |