Input

Package: @synapse-ui/input Selector: synapse-input Status: Stable

An accessible text input that integrates with Angular Reactive Forms and Template-driven Forms via ControlValueAccessor.

Overview

Input supports all common text input types, inline labels, hint text, validation status styling, and a built-in password reveal toggle. It wires into Angular's ControlValueAccessor API so it works with both formControl and ngModel directives.

Installation

npm install @synapse-ui/input @synapse-ui/theme

Basic Example

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { Input } from '@synapse-ui/input';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [Input, ReactiveFormsModule],
  template: ` <synapse-input label="Email" type="email" placeholder="you@example.com" [formControl]="emailControl" [status]="emailControl.invalid && emailControl.touched ? 'invalid' : 'default'" errorMessage="Please enter a valid email address" /> `,
})
export class DemoComponent {
  emailControl = new FormControl('', [Validators.required, Validators.email]);
}

API Reference

Inputs

Input	Type	Default	Description
label	string | undefined	undefined	Visible label rendered above the input
placeholder	string	''	Placeholder text
type	InputType	'text'	Input type
status	InputStatus	'default'	Validation state — controls border color
hint	string | undefined	undefined	Helper text rendered below the input
errorMessage	string | undefined	undefined	Error message shown when status is 'invalid'
disabled	boolean	false	Disables the input
required	boolean	false	Marks the field as required
id	string	auto-generated	Explicit id for the input (links label)

Outputs

Output	Payload	Description
valueChange	string	Emitted on every input event

Types

type InputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'url' | 'tel';
type InputStatus = 'default' | 'valid' | 'invalid';

Template-driven Example

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { Input } from '@synapse-ui/input';

@Component({
  standalone: true,
  imports: [Input, FormsModule],
  template: ` <synapse-input label="Username" placeholder="johndoe" [(ngModel)]="username" hint="Letters and numbers only" /> `,
})
export class TemplateFormComponent {
  username = '';
}

Password Field

Setting type="password" automatically adds a show/hide toggle button:

<synapse-input label="Password" type="password" placeholder="Enter password" />

Validation States

<synapse-input label="Valid field" status="valid" /> <synapse-input label="Invalid field" status="invalid" errorMessage="This field is required" />

Accessibility

• <label> is programmatically associated with the input via matching id attributes.
• aria-required is set when required is true.
• Error messages are rendered in a role="alert" region when status is 'invalid'.