Skip to main content

​
Overview

The Input component provides a feature-rich text input field with support for various input types, validation, prefix/suffix icons, error states, and multiple visual variants.

​
Import

import { MagaryInput } from 'ng-magary';

​
Basic Usage

import { Component } from '@angular/core';
import { MagaryInput } from 'ng-magary';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [MagaryInput],
  template: `
    <magary-input
      label="Email"
      placeholder="Enter your email"
      [(value)]="email"
      type="email"
      (inputFocus)="onFocus($event)"
    />
  `
})
export class DemoComponent {
  email = '';

  onFocus(event: FocusEvent) {
    console.log('Input focused', event);
  }
}

​
Properties

​
Inputs

​
value
string
default:"''"
Two-way bindable input value using signal-based model()
​
placeholder
string
default:"''"
Placeholder text displayed when input is empty
​
type
InputType
default:"'text'"
HTML input typeOptions: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search'
​
size
InputSize
default:"'normal'"
Size of the input fieldOptions: 'small' | 'normal' | 'large'
​
variant
InputVariant
default:"'outlined'"
Visual style variantOptions: 'filled' | 'outlined' | 'underlined'
​
disabled
boolean
default:"false"
When true, input is disabled and cannot be edited
​
readonly
boolean
default:"false"
When true, input is read-only
​
required
boolean
default:"false"
When true, field is required and validated on blur
​
loading
boolean
default:"false"
When true, displays loading indicator in suffix position
​
error
string
default:"''"
Error message to display below the input
​
success
boolean
default:"false"
When true, displays success state styling
​
label
string
default:"''"
Label text displayed above the input
​
ariaLabel
string
default:"''"
Custom ARIA label for accessibility. Falls back to label or placeholder.
​
helpText
string
default:"''"
Helper text displayed below the input
​
prefixIcon
string
default:"''"
Lucide icon name to display at the start of the input
​
suffixIcon
string
default:"''"
Lucide icon name to display at the end of the input
​
width
string
default:"'100%'"
Custom width (CSS value)
​
maxLength
number | undefined
default:"undefined"
Maximum number of characters allowed

​
Outputs

​
inputFocus
EventEmitter<FocusEvent>
Emitted when the input receives focus
​
inputBlur
EventEmitter<FocusEvent>
Emitted when the input loses focus. Triggers validation.
​
iconClick
EventEmitter<'prefix' | 'suffix'>
Emitted when prefix or suffix icon is clicked

​
Examples

​
Input Types

<magary-input
  label="Username"
  type="text"
  [(value)]="username"
/>

​
Visual Variants

<magary-input
  label="Name"
  variant="outlined"
  [(value)]="name"
/>

​
Sizes

<magary-input
  label="Email"
  size="small"
  [(value)]="email"
/>

​
With Icons

<magary-input
  label="Search"
  prefixIcon="search"
  placeholder="Search..."
  [(value)]="searchTerm"
/>

​
Password with Toggle

<!-- Password type automatically includes show/hide toggle -->
<magary-input
  label="Password"
  type="password"
  [(value)]="password"
  helpText="Must be at least 8 characters"
/>

​
With Validation

<magary-input
  label="Email"
  type="email"
  [required]="true"
  [(value)]="email"
  helpText="Required field"
/>

​
Success State

<magary-input
  label="Email"
  type="email"
  [(value)]="email"
  [success]="emailValid"
  helpText="Email verified successfully"
/>

​
Loading State

<magary-input
  label="Username"
  [(value)]="username"
  [loading]="checkingAvailability"
  helpText="Checking availability..."
/>

​
Character Limit

<magary-input
  label="Bio"
  [(value)]="bio"
  [maxLength]="160"
  helpText="Maximum 160 characters"
/>

​
Icon Click Handler

@Component({
  template: `
    <magary-input
      label="Search"
      prefixIcon="search"
      suffixIcon="x"
      [(value)]="searchTerm"
      (iconClick)="onIconClick($event)"
    />
  `
})
export class SearchComponent {
  searchTerm = '';

  onIconClick(position: 'prefix' | 'suffix') {
    if (position === 'suffix') {
      this.searchTerm = ''; // Clear on suffix icon click
    } else {
      this.performSearch(); // Search on prefix icon click
    }
  }
}

​
Disabled and Readonly

<magary-input
  label="Email"
  [(value)]="email"
  [disabled]="true"
/>

​
Validation

The input component includes built-in validation:

​
Required Field Validation

When required is true, the component validates on blur: 
<magary-input
  label="Name"
  [(value)]="name"
  [required]="true"
/>
<!-- Shows "Campo obligatorio" error if empty on blur -->

​
Email Validation

When type="email", validates email format on blur: 
<magary-input
  label="Email"
  type="email"
  [(value)]="email"
/>
<!-- Shows "Correo electrónico inválido" for invalid emails -->

​
Custom Validation

Use the error input for custom validation messages: 
validatePassword() {
  if (this.password.length < 8) {
    this.passwordError = 'Password must be at least 8 characters';
  } else if (!/[A-Z]/.test(this.password)) {
    this.passwordError = 'Password must contain an uppercase letter';
  } else {
    this.passwordError = '';
  }
}

​
Accessibility

The Input component includes comprehensive accessibility features:
  • ARIA Labels: Auto-generated from label, ariaLabel, or placeholder
  • ARIA Described By: Links to error/help text
  • Error Announcements: Screen readers announce validation errors
  • Focus Indicators: Clear visual focus states
  • Input Modes: Appropriate inputmode for mobile keyboards

​
Password Visibility Toggle

  • ARIA Label: “Show password” / “Hide password”
  • Keyboard Accessible: Fully accessible via keyboard
  • Icon Updates: Visual indication of current state

​
Component Details

  • Selector: magary-input
  • Source: /home/daytona/workspace/source/projects/ng-magary/src/lib/Form/input/input.ts
  • Standalone: Yes (with CommonModule, FormsModule, LucideAngularModule)
  • Change Detection: OnPush

​
Type Definitions

type InputType = 
  | 'text' 
  | 'email' 
  | 'password' 
  | 'number' 
  | 'tel' 
  | 'url' 
  | 'search';

type InputSize = 'small' | 'normal' | 'large';

type InputVariant = 'filled' | 'outlined' | 'underlined';

Build docs developers (and LLMs) love

Get started for freeTalk to us