Twitter2.2k

Input Group

A flexible input group that combines inputs with addons, prefixes, and suffixes to improve usability.

12 results
https://
52% used

Installation

npx nx g @spartan-ng/cli:ui input-group

Usage

import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
<div hlmInputGroup>
    <input hlmInputGroupInput placeholder="Search..." />
    <div hlmInputGroupAddon>
        <ng-icon hlm name="lucideSearch" />
    </div>
    <div hlmInputGroupAddon align="inline-end">12 results</div>
</div>

Examples

Icons

Text

Display additional text information alongside inputs.

$
USD
https://
.com
@company.com
120 characters left

Buttons

Add buttons to perform actions within the input group.

https://

Tooltip

Add tooltips to provide additional context or help.

Textarea

Input groups also work with textarea components. Use block-start or block-end for alignment.

Line 1, Column 1
script.js

Spinner

Show loading indicators while processing input.

Saving...
Please wait...

Label

Add labels within input groups to improve accessibility.

Dropdown

Pair input groups with dropdown menus for complex interactions.

Button Group

Wrap input groups with button groups to create prefixes and suffixes.

.com

Custom Input

Add the data-slot="input-group-control" attribute to your custom input for automatic behavior and focus state handling.

No style is applied to the custom input. Apply your own styles using the class prop.

Helm API

HlmInputGroupAddon

Selector: hlm-input-group-addon,[hlmInputGroupAddon]

Inputs

PropTypeDefaultDescription
align InputGroupAddonVariants['align'] inline-start -
class ClassValue --

HlmInputGroupButton

Selector: button[hlmInputGroupButton]

Inputs

PropTypeDefaultDescription
size InputGroupAddonVariants['size'] xs -
class ClassValue --

HlmInputGroupInput

Selector: input[hlmInputGroupInput]

Inputs

PropTypeDefaultDescription
class ClassValue --

HlmInputGroupText

Selector: span[hlmInputGroupText]

Inputs

PropTypeDefaultDescription
class ClassValue --

HlmInputGroupTextarea

Selector: textarea[hlmInputGroupTextarea]

Inputs

PropTypeDefaultDescription
class ClassValue --

HlmInputGroup

Selector: [hlmInputGroup],hlm-input-group

Inputs

PropTypeDefaultDescription
class ClassValue --
Input OTP Input