Input
A styled single-line text input.
import { BuiInput } from 'ng-blatui';
<input buiInput type="email" placeholder="Email" />Sizes
<input buiInput size="sm" placeholder="Small" />
<input buiInput placeholder="Default" />
<input buiInput size="lg" placeholder="Large" />With label
<label buiLabel for="email">Email</label>
<input id="email" buiInput type="email" placeholder="Email" />With icon
<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>Password
<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>With button
<div class="flex items-center gap-2">
<input buiInput type="email" placeholder="Email" />
<button buiButton variant="outline">Subscribe</button>
</div>File
<label buiLabel for="pic">Picture</label>
<input id="pic" buiInput type="file" />Types
<input buiInput type="number" placeholder="Quantity" min="0" />
<input buiInput type="date" aria-label="Date" />
<input buiInput type="search" placeholder="Search…" />Disabled
<input buiInput type="email" placeholder="Email" disabled />Read only
<input buiInput value="[email protected]" readonly aria-label="Email" />Invalid
Please enter a valid email address.
<input buiInput value="not-an-email" aria-invalid="true" />
<p class="text-destructive text-sm" role="alert">Please enter a valid email.</p>Branded focus
<!-- override the focus ring locally -->
<input buiInput style="--ring: #16a34a" placeholder="Emerald focus" />Utility class
<!-- 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" />