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