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

InputTypeDefaultDescription
labelstring | nullnullVisible label text wired via for / aria-labelledby.
inputIdOverridestring | nullnullExplicit control id; auto-generated when omitted.
requiredbooleanfalseMarks required and sets aria-required.
invalidOverridebooleanfalseForces invalid state without an error message.
disabledbooleanfalseDisables the projected control.
errorstring | nullnullError message included in aria-describedby.
hintstring | nullnullSupplementary hint text.

Accessibility

  • Projects a single native input, select, or textarea.
  • Auto-wires id, aria-labelledby, aria-describedby, and aria-invalid.
  • Custom component hosts (sense-input, etc.) are out of scope — use their built-in label APIs.

Reference: WAI form labels tutorial.