Docs / Components
SenseIconFieldComponent
Flex layout wrapper from @artificialsenselabs/ui that aligns a projected icon beside a form control. Dogfoods sense-icon and pairs with sense-input or native inputs.
Live demo: run nx serve showcase and open /components/icon-field (port 4202).
Overview
Category: Form / layout. Selector: sense-icon-field. Import: import { SenseIconFieldComponent } from '@artificialsenselabs/ui';
<sense-icon-field iconPosition="left">
<sense-icon name="search" />
<sense-input ariaLabel="Search" placeholder="Filter…" />
</sense-icon-field>Projection contract
Project an icon and a control as direct children. Typical pairings:
sense-icon(decorative) +sense-inputsense-icon+ nativeinputwith an associatedlabel
The control must expose its own accessible name — the wrapper does not add labels.
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
iconPosition | 'left' | 'right' | 'left' | Places the projected icon before or after the control. |
styleClass | string | null | null | Extra class names merged onto the host element. |
Accessibility
- Keep icons decorative inside labelled controls — omit per-icon
ariaLabel. - Ensure the control has a visible
labelorariaLabel/aria-labelledby. - Icon position is visual only; reading order follows DOM projection order.