Label
@xui/labelThe text label for a bare form control. Wrapping the control in <label xuiLabel> associates the two natively — clicking the text focuses the control, and assistive technology reads them together. For a control that also needs helper text or an error slot, reach for xui-form-field instead.
Install
pnpm add @xui/label Add the barrel to a standalone component's imports:
import { XuiLabelImports } from '@xui/label';@Component({ imports: [XuiLabelImports], // …})Examples
Default
Loading preview…
<label xuiLabel class="grid w-80 gap-1.5"> Email <input xuiInput type="email" placeholder="you@example.com" /></label>Error state
Loading preview…
<div class="flex w-80 flex-col gap-5"> <label xuiLabel class="grid gap-1.5"> Email (required) <input xuiInput type="email" placeholder="you@example.com" [formControl]="email" /> </label> <label xuiLabel [error]="true" class="grid gap-1.5"> Username <input xuiInput [error]="true" placeholder="octocat" /> </label></div>Disabled
Loading preview…
<label xuiLabel class="grid w-80 gap-1.5"> API key <input xuiInput disabled value="sk-••••••••" /></label>API
Styles a <label> and keeps it in step with the control it names.
Variants
variantdefaulterrorautodisabledInputs
classClassValueExtra classes, merged into the directive's own rather than replacing them.''variantXuiLabelVariants['variant']Reserved for future label styles; default is currently the only one.'default'errorXuiLabelVariants['error']Whether to render the error appearance. auto (the default) follows the wrapped control's ng-invalid.ng-touched state; true forces it on for a control the label cannot see.'auto'Methods
setError(error: XuiLabelVariants['error']): void