Docs / Components
SenseInputComponent
Labelled text field from @artificialsenselabs/ui — composes sense-icon-button for clear and password-visibility actions.
Live demo: run nx serve showcase and open /components/input (port 4202).
Overview
Category: Form / inputs. Selector: sense-input. Import: import { SenseInputComponent } from '@artificialsenselabs/ui';
<sense-input label="Email" type="search" [required]="true" [(ngModel)]="email" />API
Generated from libs/ui/src/lib/input/sense-input/sense-input.component.ts — run pnpm run docs:api to refresh.
| Input | Type | Default | Description |
|---|---|---|---|
inputId | string | null | null | Explicit `id` for the internal control; auto-generated when unset. Used for label association. |
name | string | null | null | Native control `name` for form submission. |
label | string | '' | Visible label text. |
placeholder | string | '' | Placeholder shown when the field is empty. |
type | SenseInputType | 'text' | Native input type — `text`, `password` (adds a visibility toggle), or `search`. |
hint | string | null | null | Helper text under the field, wired via `aria-describedby`. |
error | string | null | null | Validation error message; sets `aria-invalid` and a live `role="alert"` region. |
required | boolean | false | Marks the control required for validation and ARIA. |
readonly | boolean | false | Renders read-only: value is shown but cannot be edited. |
disabled | boolean | false | Disables interaction and dims the control. |
clearable | boolean | true | Shows a clear (✕) action when the field has a value. |
autocomplete | string | null | null | Native `autocomplete` token forwarded to the input. |
maxLength | number | null | null | Maximum character length (native `maxlength`). |
ariaLabel | string | null | null | Accessible name override when no visible `label` is provided. |
ariaLabelledby | string | null | null | External label ids for `aria-labelledby` when the visible label is rendered elsewhere. |
autofocus | boolean | false | Focuses the native input after the first render when true. |
size | SenseInputSize | 'md' | Control density — `sm`, `md` (default), or `lg`. |
variant | SenseSurfaceVariant | 'outlined' | Field chrome: `outlined` (default), `filled`, or `ghost`. |
passwordVisible | boolean | false | Two-way password-visibility state (`[(passwordVisible)]`) for `type="password"`. |
| Output | Type | Description |
|---|---|---|
cleared | void | Emitted when the clear action empties the field. |
toggledPasswordVisibility | boolean | Emitted when the password-visibility toggle flips, with the new visible state. |
valueChange | string | Emitted on each user edit with the new string value. |
inputFocus | FocusEvent | Emitted when the native input receives focus. |
inputBlur | FocusEvent | Emitted when the native input loses focus. |
Accessibility
- Label association via
for/id; required fields expose visible and textual markers. errorsetsaria-invalidand a liverole="alert"region.- Clear and password actions use
sense-icon-buttonwith i18naria-label. - Implements
ControlValueAccessor— works with reactive and template-driven forms.