Input

Displays a form input field or a component that looks like an input field.

PreviousNext
import { Component } from '@angular/core';
 
import { ZardInputDirective } from '../input.directive';
 
@Component({
  selector: 'z-demo-input-default',
  standalone: true,
  imports: [ZardInputDirective],
  template: `
    <input z-input placeholder="Default" />
    <input z-input disabled placeholder="Disabled" />
  `,
})
export class ZardDemoInputDefaultComponent {}

Installation

1

Run the CLI

Use the CLI to add the component to your project. 

npx @ngzard/ui add input
1

Add the component files

Create the component directory structure and add the following files to your project.

input.directive.ts
input.directive.ts
import type { ClassValue } from 'clsx';
 
import { computed, Directive, ElementRef, inject, input } from '@angular/core';
 
import { mergeClasses, transform } from '../../shared/utils/utils';
import { inputVariants, type ZardInputVariants } from './input.variants';
 
@Directive({
  selector: 'input[z-input], textarea[z-input]',
  exportAs: 'zInput',
  standalone: true,
  host: {
    '[class]': 'classes()',
  },
})
export class ZardInputDirective {
  readonly elementRef = inject(ElementRef);
  private readonly isTextarea = this.elementRef.nativeElement.tagName.toLowerCase() === 'textarea';
 
  readonly zBorderless = input(false, { transform });
  readonly zSize = input<ZardInputVariants['zSize']>('default');
  readonly zStatus = input<ZardInputVariants['zStatus']>();
 
  readonly class = input<ClassValue>('');
 
  protected readonly classes = computed(() =>
    mergeClasses(inputVariants({ zType: !this.isTextarea ? 'default' : 'textarea', zSize: this.zSize(), zStatus: this.zStatus(), zBorderless: this.zBorderless() }), this.class()),
  );
}
input.variants.ts
input.variants.ts
import { cva, type VariantProps } from 'class-variance-authority';
 
export type zInputIcon = 'email' | 'password' | 'text';
 
export const inputVariants = cva('w-full', {
  variants: {
    zType: {
      default:
        'flex rounded-md border px-4 font-normal border-input bg-transparent text-base md:text-sm file:border-0 file:text-foreground file:bg-transparent file:font-medium placeholder:text-muted-foreground outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
      textarea:
        'flex min-h-[80px] rounded-md border border-input bg-background px-3 py-2 text-base placeholder:text-muted-foreground outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
    },
    zSize: {
      default: 'h-10 py-2 file:max-md:py-0',
      sm: 'h-9 file:md:py-2 file:max-md:py-1.5',
      lg: 'h-11 py-1 file:md:py-3 file:max-md:py-2.5',
    },
    zStatus: {
      error: 'border-destructive focus-visible:ring-destructive',
      warning: 'border-yellow-500 focus-visible:ring-yellow-500',
      success: 'border-green-500 focus-visible:ring-green-500',
    },
    zBorderless: {
      true: 'flex-1 bg-transparent border-0 outline-none focus-visible:ring-0 focus-visible:ring-offset-0 px-0 py-0',
    },
  },
  defaultVariants: {
    zType: 'default',
    zSize: 'default',
  },
});
 
export type ZardInputVariants = VariantProps<typeof inputVariants>;

Examples

default

import { Component } from '@angular/core';
 
import { ZardInputDirective } from '../input.directive';
 
@Component({
  selector: 'z-demo-input-default',
  standalone: true,
  imports: [ZardInputDirective],
  template: `
    <input z-input placeholder="Default" />
    <input z-input disabled placeholder="Disabled" />
  `,
})
export class ZardDemoInputDefaultComponent {}

size

import { Component } from '@angular/core';
 
import { ZardInputDirective } from '../input.directive';
 
@Component({
  selector: 'z-demo-input-size',
  standalone: true,
  imports: [ZardInputDirective],
  template: `
    <input z-input zSize="sm" placeholder="small size" />
    <input z-input zSize="default" placeholder="default size" />
    <input z-input zSize="lg" placeholder="large size" />
  `,
})
export class ZardDemoInputSizeComponent {}

status

import { Component } from '@angular/core';
 
import { ZardInputDirective } from '../input.directive';
 
@Component({
  selector: 'z-demo-input-status',
  standalone: true,
  imports: [ZardInputDirective],
  template: `
    <input z-input zStatus="error" placeholder="Error" />
    <input z-input zStatus="warning" placeholder="Warning" />
    <input z-input zStatus="success" placeholder="Success" />
  `,
})
export class ZardDemoInputStatusComponent {}

borderless

import { Component } from '@angular/core';
 
import { ZardInputDirective } from '../input.directive';
 
@Component({
  selector: 'z-demo-input-borderless',
  standalone: true,
  imports: [ZardInputDirective],
  template: `<input z-input zBorderless placeholder="Borderless" />`,
})
export class ZardDemoInputBorderlessComponent {}

text area

import { Component } from '@angular/core';
 
import { ZardInputDirective } from '../input.directive';
 
@Component({
  selector: 'z-demo-input-text-area',
  standalone: true,
  imports: [ZardInputDirective],
  template: `
    <textarea z-input rows="8" cols="12" placeholder="Default"></textarea>
    <textarea zBorderless z-input rows="8" cols="12" placeholder="Borderless"></textarea>
  `,
})
export class ZardDemoInputTextAreaComponent {}

API

[z-input] Directive

z-input is a Directive, it accepts all props which are supported by native input.

To get a customized input, just pass the following props to the directive.

Property Description Type Default
[zSize] input size default|small|large default
[zStatus] input status error|warning|success null
[zBorderless] input without border boolean false