CSS only

Input group

Joins an input with addons — icons, text, buttons, selects — into a single control. SCSS-only: a ng-input-group wrapper around form controls and ng-input-addon elements.

Direct children are fused: inner corners are squared, duplicate borders collapse, and only the first and last child keep the radius. Focus lights up the whole group (focus-within ring), and a disabled input greys out its addons too.

Text & icon addons

A ng-input-addon can sit before, after, or on both sides (multi-addon).

Username

Price

€ .00

input-group.html

<div class="ng-field mb-16">
    <label class="ng-label">Username</label>
    <div class="ng-input-group">
        <span class="ng-input-addon"><i class="ph ph-user"></i></span>
        <input type="text" class="ng-input" placeholder="jane">
    </div>
</div>
<div class="ng-field">
    <label class="ng-label">Price</label>
    <div class="ng-input-group">
        <span class="ng-input-addon">€</span>
        <input type="number" class="ng-input" placeholder="0">
        <span class="ng-input-addon">.00</span>
    </div>
</div>

With buttons

Any ng-btn placed in the group joins seamlessly — the classic search and subscribe patterns.

input-group.html

<div class="ng-field mb-16">
    <label class="ng-label">Search</label>
    <div class="ng-input-group">
        <input type="text" class="ng-input" placeholder="Search the docs…">
        <button type="button" class="ng-btn ng-btn-primary"><i class="ph ph-magnifying-glass"></i></button>
    </div>
</div>
<div class="ng-field">
    <label class="ng-label">Subscribe</label>
    <div class="ng-input-group">
        <span class="ng-input-addon"><i class="ph ph-envelope-simple"></i></span>
        <input type="email" class="ng-input" placeholder="you@example.com">
        <button type="button" class="ng-btn ng-btn-primary">Join</button>
    </div>
</div>

With a select

A ng-select works as an addon too; w-auto stops it stretching.

Amount

input-group.html

<div class="ng-field">
    <label class="ng-label">Amount</label>
    <div class="ng-input-group">
        <input type="number" class="ng-input" placeholder="100">
        <select class="ng-select w-auto">
            <option>EUR</option>
            <option>USD</option>
            <option>GBP</option>
        </select>
    </div>
</div>

Ghost addon

ng-input-addon-ghost uses the input background instead of the sunken one — the addon reads as part of the field.

Website

https://

input-group.html

<div class="ng-field">
    <label class="ng-label">Website</label>
    <div class="ng-input-group">
        <span class="ng-input-addon-ghost ng-input-addon">https://</span>
        <input type="text" class="ng-input" placeholder="example.com">
    </div>
</div>

Sizes

ng-input-group-sm / ng-input-group-lg size every child at once — no need to size the input and the addon separately.

input-group.html

<div class="ng-field mb-16">
    <div class="ng-input-group ng-input-group-sm">
        <span class="ng-input-addon"><i class="ph ph-magnifying-glass"></i></span>
        <input type="text" class="ng-input" placeholder="Small">
    </div>
</div>
<div class="ng-field mb-16">
    <div class="ng-input-group">
        <span class="ng-input-addon"><i class="ph ph-magnifying-glass"></i></span>
        <input type="text" class="ng-input" placeholder="Medium (default)">
    </div>
</div>
<div class="ng-field">
    <div class="ng-input-group ng-input-group-lg">
        <span class="ng-input-addon"><i class="ph ph-magnifying-glass"></i></span>
        <input type="text" class="ng-input" placeholder="Large">
    </div>
</div>

Disabled

Disable the input and the addons follow (or force it with is-disabled on the group). The disabled tokens live on ng-form, so keep the group inside one.

input-group.html

<form class="ng-form">
    <div class="ng-field">
        <label class="ng-label">API key</label>
        <div class="ng-input-group">
            <span class="ng-input-addon"><i class="ph ph-key"></i></span>
            <input type="text" class="ng-input" value="sk-…" disabled>
        </div>
    </div>
</form>

Anatomy

ng-input-group ng-input-addon ng-input-addon-ghost

Accepted children

ng-input ng-select ng-textarea ng-btn ng-input-addon

Modifiers & states

ng-input-group-sm ng-input-group-lg is-disabled

Reference

Generated from the component source (_ng_input_group.scss).

Component info

Name	`Input Group`
Type	`css`
Version	`1.1.0`
Status	`css`
CSS	`/assets/css/components/_ng_input_group.scss`

Classes

.ng-btn .ng-btn-group .ng-input .ng-input-addon .ng-input-addon-ghost .ng-input-group .ng-input-group-lg .ng-input-group-sm .ng-password-toggle .ng-select .ng-textarea

Tokens

--ng-ig-addon-bg --ng-ig-addon-color --ng-ig-addon-padding-x --ng-input-padding-x --ng-input-padding-y