Docs / Components
SenseFloatLabelComponent
Float-label wrapper from @artificialsenselabs/ui that pairs a projected label with a form control and applies over, in, or on layout variants.
Live demo: run nx serve showcase and open /components/float-label (port 4202).
Overview
Category: Form. Selector: sense-float-label. Import: import { SenseFloatLabelComponent } from '@artificialsenselabs/ui';
<sense-float-label variant="in">
<label>Email</label>
<input type="email" />
</sense-float-label>Projection contract
Project exactly two direct children in this order:
- A native
<label> - A control:
input,textarea,select, or a custom host such assense-input
The wrapper auto-wires for/id, sets a blank placeholder on text controls when needed for :placeholder-shown styling, and uses aria-labelledby for non-native hosts.
Inputs
| Input | Type | Default | Description |
|---|---|---|---|
variant | 'over' | 'in' | 'on' | 'over' | Label position treatment — matches PrimeNG FloatLabel variants. |
Accessibility
- Always pair a visible
<label>with the control — the wrapper does not invent label text. - Native controls receive programmatic
for/idassociation when missing. - Custom hosts fall back to
aria-labelledbyreferencing the label id. - Blank placeholder (
" ") is added only when empty so float styling can use:placeholder-shown.