@synapse-ui/input

Accessible Angular text input with label, hint, validation states, and full ControlValueAccessor support.

Installation

npm install @synapse-ui/input

Usage

import { Input } from '@synapse-ui/input';

@Component({
  imports: [Input],
  template: ` <synapse-input label="Email" type="email" placeholder="[email protected]" status="invalid" errorMessage="Invalid email address" (valueChange)="onValue($event)" /> `,
})
export class MyComponent {}

Inputs

| Input | Type | Default | Description | | -------------- | --------------------------------------------------------------------------- | ----------- | ------------------------------- | | type | 'text' \| 'email' \| 'password' \| 'number' \| 'search' \| 'url' \| 'tel' | 'text' | Input type attribute | | label | string \| undefined | undefined | Associated <label> text | | placeholder | string | '' | Placeholder text | | status | 'default' \| 'valid' \| 'invalid' | 'default' | Visual validation state | | hint | string \| undefined | undefined | Helper text below the input | | errorMessage | string \| undefined | undefined | Error text (shown when invalid) | | disabled | boolean | false | Disables the input | | required | boolean | false | Marks as required |

Outputs

| Output | Payload | Description | | ------------- | -------- | -------------------------- | | valueChange | string | Emitted on every keystroke |

Running unit tests

Run nx test input to execute the unit tests.