Input

import { BuiInput } from 'ng-blatui';

<input buiInput type="email" placeholder="Email" />

<input buiInput size="sm" placeholder="Small" />
<input buiInput placeholder="Default" />
<input buiInput size="lg" placeholder="Large" />

<label buiLabel for="email">Email</label>
<input id="email" buiInput type="email" placeholder="Email" />

<div class="relative">
  <svg class="absolute top-1/2 left-3 size-4 -translate-y-1/2"><!-- mail --></svg>
  <input buiInput type="email" class="pl-9" placeholder="[email protected]" />
</div>

<div class="relative">
  <svg class="absolute top-1/2 left-3 size-4 -translate-y-1/2"><!-- lock --></svg>
  <input buiInput type="password" class="pl-9" placeholder="••••••••" />
</div>

<div class="flex items-center gap-2">
  <input buiInput type="email" placeholder="Email" />
  <button buiButton variant="outline">Subscribe</button>
</div>

<label buiLabel for="pic">Picture</label>
<input id="pic" buiInput type="file" />

<input buiInput type="number" placeholder="Quantity" min="0" />
<input buiInput type="date" aria-label="Date" />
<input buiInput type="search" placeholder="Search…" />

<input buiInput type="email" placeholder="Email" disabled />

<input buiInput value="[email protected]" readonly aria-label="Email" />

<input buiInput value="not-an-email" aria-invalid="true" />
<p class="text-destructive text-sm" role="alert">Please enter a valid email.</p>

<!-- override the focus ring locally -->
<input buiInput style="--ring: #16a34a" placeholder="Emerald focus" />

<!-- a native input styled entirely with utility classes -->
<input type="email" class="h-9 w-full rounded-md border border-input bg-transparent px-3 text-sm shadow-xs outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50" />