The Input component provides a flexible text input field with support for labels, icons, validation states, and various input types.
Basic usage
<flx-input
label="Username"
placeholder="Enter your username"
[(ngModel)]="username">
</flx-input>
Properties
Label text displayed above the input field
Placeholder text shown when input is empty
The current value of the input field
HTML input type: text, email, password, number, tel, url
Makes the input read-only
Marks the field as required
error
boolean | string
default:"false"
Shows error state. Pass a string to display error message
Helper text displayed below the input
Icon displayed at the start of the input
Icon displayed at the end of the input
Maximum number of characters allowed
Browser autocomplete hint
Events
Emitted when the input value changes
Emitted when the input loses focus
Emitted when the input receives focus
Examples
With icons
With validation
Reactive forms
Input types
<flx-input
label="Email"
type="email"
prefixIcon="mail"
placeholder="you@example.com"
[(ngModel)]="email">
</flx-input>
<flx-input
label="Search"
prefixIcon="search"
suffixIcon="x"
placeholder="Search..."
[(ngModel)]="searchQuery">
</flx-input>
<flx-input
label="Username"
[required]="true"
[error]="usernameError"
helperText="Must be 3-20 characters"
[(ngModel)]="username"
(blur)="validateUsername()">
</flx-input>
export class MyComponent {
username = '';
usernameError = false;
validateUsername() {
this.usernameError = this.username.length < 3 || this.username.length > 20;
}
}
<form [formGroup]="loginForm">
<flx-input
label="Email"
type="email"
formControlName="email"
[error]="emailControl.invalid && emailControl.touched"
helperText="Enter a valid email address">
</flx-input>
<flx-input
label="Password"
type="password"
formControlName="password"
[error]="passwordControl.invalid && passwordControl.touched">
</flx-input>
</form>
import { FormBuilder, Validators } from '@angular/forms';
export class LoginComponent {
loginForm = this.fb.group({
email: ['', [Validators.required, Validators.email]],
password: ['', [Validators.required, Validators.minLength(8)]]
});
get emailControl() { return this.loginForm.get('email')!; }
get passwordControl() { return this.loginForm.get('password')!; }
constructor(private fb: FormBuilder) {}
}
<!-- Text input -->
<flx-input
label="Full name"
type="text"
[(ngModel)]="fullName">
</flx-input>
<!-- Email input -->
<flx-input
label="Email address"
type="email"
[(ngModel)]="email">
</flx-input>
<!-- Password input -->
<flx-input
label="Password"
type="password"
[(ngModel)]="password">
</flx-input>
<!-- Number input -->
<flx-input
label="Age"
type="number"
[(ngModel)]="age">
</flx-input>
<!-- Phone input -->
<flx-input
label="Phone number"
type="tel"
[(ngModel)]="phone">
</flx-input>
Styling
Customize the Input component using CSS custom properties:
flx-input {
--flx-input-height: 40px;
--flx-input-padding: 0 12px;
--flx-input-border-radius: 4px;
--flx-input-border-color: #d1d5db;
--flx-input-focus-border-color: #3b82f6;
--flx-input-error-border-color: #ef4444;
--flx-input-background: #ffffff;
--flx-input-text-color: #111827;
--flx-input-placeholder-color: #9ca3af;
}
Accessibility
The Input component automatically handles:
- Proper label association with
for and id attributes
aria-required for required fieldsaria-invalid for fields with errorsaria-describedby for helper text and error messages
Always provide a descriptive label for screen reader users. If you need a visually hidden label, use CSS to hide it while keeping it accessible.
Best practices
- Use appropriate input types for better mobile keyboard support
- Provide clear validation feedback with error messages
- Use helper text to guide users on input requirements
- Consider using
autocomplete attributes for common fields
- Set reasonable
maxLength limits for text inputs
- Use prefix/suffix icons to provide visual context