Input group

Compose inputs with addons, text and buttons.

import {
  BuiInputGroup, BuiInputGroupAddon, BuiInputGroupInput, BuiInputGroupButton,
} from 'ng-blatui';

<div buiInputGroup>
  <input buiInputGroupInput placeholder="Search…" />
  <div buiInputGroupAddon><svg><!-- search --></svg></div>
</div>

Icon at end

<div buiInputGroup>
  <input buiInputGroupInput placeholder="[email protected]" />
  <div buiInputGroupAddon align="inline-end"><svg><!-- mail --></svg></div>
</div>

With text

https://

<div buiInputGroup>
  <div buiInputGroupAddon><span buiInputGroupText>https://</span></div>
  <input buiInputGroupInput placeholder="example.com" />
</div>

With button

<div buiInputGroup>
  <input buiInputGroupInput placeholder="Enter your email" />
  <div buiInputGroupAddon align="inline-end"><button buiInputGroupButton size="xs">Subscribe</button></div>
</div>

Textarea

<div buiInputGroup>
  <textarea buiInputGroupInput class="min-h-20 resize-none border-0 shadow-none"></textarea>
  <div buiInputGroupAddon align="block-end"><button buiInputGroupButton size="xs">Send</button></div>
</div>

Password

<div buiInputGroup>
  <input buiInputGroupInput type="password" placeholder="Password" />
  <div buiInputGroupAddon align="inline-end">
    <button buiInputGroupButton aria-label="Show password"><svg><!-- eye --></svg></button>
  </div>
</div>

Spinner

<div buiInputGroup>
  <input buiInputGroupInput placeholder="Checking…" />
  <div buiInputGroupAddon align="inline-end"><svg class="animate-spin"><!-- spinner --></svg></div>
</div>