Form field
@xui/form-fieldThe wrapper that gives a control its label, hint and error text, and wires the aria relationships between them so a screen reader announces the three together.
Install
pnpm add @xui/form-field Add the barrel to a standalone component's imports:
import { XuiFormFieldImports } from '@xui/form-field';
@Component({
imports: [XuiFormFieldImports],
// …
})Examples
Default
Loading preview…
<xui-form-field>
<input xuiInput aria-label="Name" [formControl]="name" placeholder="Name" />
<xui-error>The field is required!</xui-error>
<xui-hint>Enter your real name</xui-hint>
</xui-form-field>With label
Loading preview…
<xui-form-field
class="w-80"
label="Email address"
labelInfo="(required)"
subLabel="We use this to send receipts"
helperText="You can change this later in settings"
>
<input xuiInput class="w-full" type="email" placeholder="you@example.com" />
</xui-form-field>Color
Loading preview…
<div class="flex flex-col gap-5 w-80">
<xui-form-field color="success" label="Username" helperText="This name is available">
<input xuiInput class="w-full" value="octocat" />
</xui-form-field>
<xui-form-field color="warning" label="Password" helperText="Consider a longer passphrase">
<input xuiInput class="w-full" type="password" value="hunter2" />
</xui-form-field>
</div>Inline
Loading preview…
<xui-form-field inline label="Port" helperText="Default is 8080" class="w-96">
<input xuiInput class="w-24" type="number" value="8080" />
</xui-form-field>API
A validation message for the control in a xui-form-field.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''Wraps a control with its label, helper text and validation message, and wires the three together.
Variants
inlinefalsecolornoneInputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''labelstringThe primary label rendered above (or beside, when inline) the control.''labelInfostringSecondary text shown next to the label, e.g. "(optional)".''subLabelstringA smaller description under the label.''helperTextstringMuted helper text under the control, hidden while an error is shown.''colorXuiFormFieldColorA deliberate accent for the label and helper text.this.config.colorinlinebooleanLay the label beside the control rather than above it.this.config.inlineSupporting text under the control in a xui-form-field.
Inputs
classClassValueExtra classes, merged into the component's own rather than replacing them.''