ArtificialSenseDocs

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.

Inputs
InputTypeDefaultDescription
inputIdstring | nullnull Explicit `id` for the internal control; auto-generated when unset. Used for label association.
namestring | nullnull Native control `name` for form submission.
labelstring'' Visible label text.
placeholderstring'' Placeholder shown when the field is empty.
typeSenseInputType'text' Native input type — `text`, `password` (adds a visibility toggle), or `search`.
hintstring | nullnull Helper text under the field, wired via `aria-describedby`.
errorstring | nullnull Validation error message; sets `aria-invalid` and a live `role="alert"` region.
requiredbooleanfalse Marks the control required for validation and ARIA.
readonlybooleanfalse Renders read-only: value is shown but cannot be edited.
disabledbooleanfalse Disables interaction and dims the control.
clearablebooleantrue Shows a clear (✕) action when the field has a value.
autocompletestring | nullnull Native `autocomplete` token forwarded to the input.
maxLengthnumber | nullnull Maximum character length (native `maxlength`).
ariaLabelstring | nullnull Accessible name override when no visible `label` is provided.
ariaLabelledbystring | nullnull External label ids for `aria-labelledby` when the visible label is rendered elsewhere.
autofocusbooleanfalse Focuses the native input after the first render when true.
sizeSenseInputSize'md' Control density — `sm`, `md` (default), or `lg`.
variantSenseSurfaceVariant'outlined' Field chrome: `outlined` (default), `filled`, or `ghost`.
passwordVisiblebooleanfalse Two-way password-visibility state (`[(passwordVisible)]`) for `type="password"`.
Outputs
OutputTypeDescription
clearedvoidEmitted when the clear action empties the field.
toggledPasswordVisibilitybooleanEmitted when the password-visibility toggle flips, with the new visible state.
valueChangestringEmitted on each user edit with the new string value.
inputFocusFocusEventEmitted when the native input receives focus.
inputBlurFocusEventEmitted when the native input loses focus.

Accessibility

  • Label association via for/id; required fields expose visible and textual markers.
  • error sets aria-invalid and a live role="alert" region.
  • Clear and password actions use sense-icon-button with i18n aria-label.
  • Implements ControlValueAccessor — works with reactive and template-driven forms.