Input
@xui/inputA non-interactive adornment pinned to the leading edge of an input — an icon, a currency symbol, a short prefix. Pointer events pass through to the input.
Install
pnpm add @xui/input Add the barrel to a standalone component's imports:
import { XuiInputImports } from '@xui/input';
@Component({
imports: [XuiInputImports],
// …
})Examples
Default
Loading preview…
<label xuiLabel class="grid gap-1.5 w-80">
E-Mail:
<input xuiInput [error]="true" type="email" placeholder="Email" value="Foo Bar" />
</label>
<div xuiInputError>Invalid E-mail!</div>
<label xuiLabel class="grid gap-2 w-80 mt-4">
Small:
<input xuiInput size="sm" type="email" placeholder="Email" />
</label>
<!-- <label xuiLabel class="grid gap-2 w-80 mt-4">-->
<!-- Large:-->
<!-- <input xuiInput size="lg" type="email" placeholder="Email" />-->
<!-- </label>-->
<!-- A sm control inside a md one leaves 3px either side, so centring on the axis beats
guessing an offset — and the button keeps the height its own size step gives it. The
padding reserves the button's lane, so typed text stops rather than running underneath. -->
<div class="grid w-80 relative mt-4">
<input xuiInput class="pr-22" type="email" placeholder="Email" />
<button xuiButton class="absolute top-1/2 right-1.5 -translate-y-1/2" size="sm" type="button">Search!</button>
</div>
<!-- <div class="grid w-80 relative mt-4">-->
<!-- <input xuiInput size="lg" type="email" placeholder="Email" />-->
<!-- <button xuiButton class="absolute bottom-1 right-1" size="sm" type="button">Search!</button>-->
<!-- </div>-->
<div class="grid w-80 relative mt-4">
<input xuiInput class="pl-22" type="email" placeholder="Email" />
<button xuiButton class="absolute top-1/2 left-1.5 -translate-y-1/2" size="sm" type="button">Search!</button>
</div>
<!-- Same centring for the static affixes, and text-sm so they read at the input's size
rather than a step larger. -->
<div class="grid w-80 relative mt-4">
<span class="absolute left-3 top-1/2 -translate-y-1/2 text-sm font-semibold">https://</span>
<input xuiInput class="pl-17 pr-9" type="email" placeholder="Website" />
<span class="absolute right-3 top-1/2 -translate-y-1/2 text-sm font-semibold">.io</span>
</div>Input group
Loading preview…
<div class="flex flex-col gap-4 w-80">
<xui-input-group class="w-full">
<ng-icon xuiInputLeftElement xui name="matSearchRound" />
<input xuiInput class="w-full" type="search" placeholder="Search…" />
</xui-input-group>
<xui-input-group class="w-full">
<ng-icon xuiInputLeftElement xui name="matLockRound" />
<input xuiInput class="w-full" type="password" placeholder="Password" />
<button xuiInputRightElement xuiButton size="sm" variant="ghost" type="button" class="mr-1 h-7">Show</button>
</xui-input-group>
<xui-input-group clearable class="w-full">
<input xuiInput class="w-full" value="Clear me" placeholder="Type to reveal the clear button" />
</xui-input-group>
</div>Color
Loading preview…
<div class="flex flex-col gap-3 w-80">
<input xuiInput color="primary" placeholder="Primary" />
<input xuiInput color="success" placeholder="Success" />
<input xuiInput color="warning" placeholder="Warning" />
<input xuiInput color="error" placeholder="Error" />
</div>API
A non-interactive adornment pinned to the leading edge of an input — an icon, a currency symbol, a short prefix. Pointer events pass through to the input.
The trailing-edge counterpart of {@link XuiInputLeftElement} — often a button.
Frames a single [xuiInput] with optional leading/trailing elements and an optional clear button, reserving the padding the input needs so its text never runs under an adornment.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''clearablebooleanShow a clear button on the trailing edge whenever the input holds a value.falseTurns a native <input> (or <textarea>, <select>) into an xUI text field.
Variants
sizemdsurfacedarkcolornoneerrorautoInputs
classClassValueThe user-defined classes''sizeXuiInputVariants['size']Control height, from the shared control scale, so the field lines up with a button or select of the same size.this.config.sizesurfaceXuiInputVariants['surface']Which background the field sits on: inset (dark) or raised (light). Pick the one that contrasts with the surface around it, not the page theme.this.config.surfacecolorXuiInputVariants['color']A deliberate accent border, distinct from the automatic invalid state — use it to mark a field as noteworthy, not as wrong.this.config.colorerrorXuiInputVariants['error']Whether to render the error appearance. auto (the default) follows the bound control's error state; true forces it on. The tracker wins while it reports an error, so auto never hides a real validation failure.'auto'Methods
setError(error: XuiInputVariants['error'])