Docs / Components
SenseFormFieldComponent
Accessible wrapper from @artificialsenselabs/ui for native form controls with label, hint, and error messaging.
Live demo: run nx serve showcase and open /components/form-field (port 4202).
Overview
Category: Form controls. Selector: sense-form-field. Import: import { SenseFormFieldComponent } from '@artificialsenselabs/ui';
<sense-form-field label="Email" hint="Work address only" [required]="true">
<input type="email" />
</sense-form-field>Inputs
| Input | Type | Default | Description |
|---|---|---|---|
label | string | null | null | Visible label text wired via for / aria-labelledby. |
inputIdOverride | string | null | null | Explicit control id; auto-generated when omitted. |
required | boolean | false | Marks required and sets aria-required. |
invalidOverride | boolean | false | Forces invalid state without an error message. |
disabled | boolean | false | Disables the projected control. |
error | string | null | null | Error message included in aria-describedby. |
hint | string | null | null | Supplementary hint text. |
Accessibility
- Projects a single native
input,select, ortextarea. - Auto-wires
id,aria-labelledby,aria-describedby, andaria-invalid. - Custom component hosts (
sense-input, etc.) are out of scope — use their built-in label APIs.
Reference: WAI form labels tutorial.