[ Installation ] 

npx wally-ui add input

[ All States Preview ]

[ Import ] 

import { Input } from './components/wally-ui/input/input';
@Component({
  selector: 'app-example',
  imports: [Input, ReactiveFormsModule],
  templateUrl: './example.html',
  styleUrl: './example.css'
})

[ FormGroup Integration ]

Template Setup 

<form [formGroup]="userForm" (ngSubmit)="onSubmit()">
  <wally-input
    formControlName="name"
    placeholder="Enter your name">
  </wally-input>

  <wally-input
    formControlName="email"
    placeholder="Enter your email">
  </wally-input>
</form>

Component Setup 

import { FormBuilder, FormGroup, Validators, ReactiveFormsModule } from '@angular/forms';

userForm: FormGroup;

constructor(private fb: FormBuilder) {
  this.userForm = this.fb.group({
    name: ['', Validators.required],
    email: ['', [Validators.required, Validators.email]]
  });
}

onSubmit() {
  if (this.userForm.valid) {
    console.log(this.userForm.value);
  }
}

Live Example

Form Value: { "name": "", "email": "" }

[ Basic Usage ] 

placeholder: string = 'Enter your name';
<wally-input placeholder="Enter text"></wally-input>

[ States & Features ]

With Labels 

<wally-input label="Full Name" placeholder="Enter your name"></wally-input>

Loading State 

<wally-input [loading]="true" placeholder="Loading..."></wally-input>

Valid State 

<wally-input [valid]="true" placeholder="Valid input"></wally-input>

Error State 

<wally-input errorMessage="This field is required" placeholder="Enter value"></wally-input>

Disabled State 

<wally-input [disabled]="true" placeholder="Disabled input"></wally-input>

Password with Toggle 

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

[ Form Validation ]

Validation Setup 

validationForm = this.fb.group({
  username: ['', [Validators.required, Validators.minLength(3)]]
});

Template with Validation 

<form [formGroup]="validationForm">
  <wally-input
    formControlName="username"
    placeholder="Username (required)">
  </wally-input>

  @if (validationForm.get('username')?.invalid && validationForm.get('username')?.touched) {
    <div>
      <span class="text-red-500 text-sm">Username is required</span>
    </div>
  }
</form>

Live Validation Example

[ API Reference ]

PropertyTypeDefaultDescription
labelstring''Optional label text displayed above the input
typestring'text'HTML input type (text, email, password, etc.)
placeholderstring''Placeholder text for the input
loadingbooleanfalseShows loading spinner and disables input when true
validbooleanfalseShows green styling when input is valid
errorMessagestring''Error message text - shows red styling and displays error below input
disabledbooleanfalseDisables the input when true - shows visual disabled state and prevents interaction

[ Future Features ]

Styles-Only Directive

COMING SOON

A lightweight directive for developers who want only the input styling without the full component logic.