Input

Docs

Input

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

Preview

Code

import { UbInputDirective } from '@/components/ui/input'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'input-demo-new-york',
  imports: [UbInputDirective],
  template: ` <input ubInput type="text" placeholder="Email" /> `,
})
export class InputDemoNewYork { }

import { UbInputDirective } from '@/components/ui/input'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'input-demo-default',
  imports: [UbInputDirective],
  template: `<input ubInput type="text" placeholder="Email" />`,
})
export class InputDemoDefault { }

Installation

CLI

Manual

npx shadcn-ng@latest add input

Copy and paste the following code into your project.

import { cn } from '@/lib/utils'

import { computed, Directive, input } from '@angular/core'

export type InputType =
  | 'date'
  | 'datetime-local'
  | 'email'
  | 'month'
  | 'number'
  | 'password'
  | 'tel'
  | 'file'
  | 'search'
  | 'text'

@Directive({
  selector: '[ubInput]',
  standalone: true,
  host: {
    '[class]': 'computedClass()',
    '[type]': 'type()',
  },
})
export class UbInputDirective<Type extends InputType> {
  readonly type = input.required<Type>()
  readonly class = input<string>()

  protected computedClass = computed(() =>
    cn(
      'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
      this.class(),
    ),
  )
}

import { cn } from '@/lib/utils'

import { computed, Directive, input } from '@angular/core'

export type InputType =
  | 'date'
  | 'datetime-local'
  | 'email'
  | 'month'
  | 'number'
  | 'password'
  | 'tel'
  | 'file'
  | 'search'
  | 'text'

@Directive({
  selector: '[ubInput]',
  standalone: true,
  host: {
    '[class]': 'computedClass()',
    '[type]': 'type()',
  },
})
export class UbInputDirective<Type extends InputType> {
  readonly type = input.required<Type>()
  readonly class = input<string>()

  protected computedClass = computed(() =>
    cn(
      'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
      this.class(),
    ),
  )
}

Update the import paths to match your project setup.

Usage

import { UbInputDirective } from "@/components/ui/input.directive";

<input type="text" ubInput />

Examples

Default

Preview

Code

import { UbInputDirective } from '@/components/ui/input'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'input-demo-new-york',
  imports: [UbInputDirective],
  template: ` <input ubInput type="text" placeholder="Email" /> `,
})
export class InputDemoNewYork { }

import { UbInputDirective } from '@/components/ui/input'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'input-demo-default',
  imports: [UbInputDirective],
  template: `<input ubInput type="text" placeholder="Email" />`,
})
export class InputDemoDefault { }

File

Preview

Code

import { UbInputDirective } from '@/components/ui/input'

import { UbLabelDirective } from '@/components/ui/label'
import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'input-file-new-york',
  imports: [UbInputDirective, UbLabelDirective],
  template: `
    <div class="grid w-full max-w-sm items-center gap-1.5">
      <label ubLabel htmlFor="picture">Picture</label>
      <input ubInput id="picture" type="file" />
    </div>
  `,
})
export class InputFileNewYork { }

import { UbInputDirective } from '@/components/ui/input'

import { UbLabelDirective } from '@/components/ui/label'
import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'input-file-default',
  imports: [UbInputDirective, UbLabelDirective],
  template: `
    <div class="grid w-full max-w-sm items-center gap-1.5">
      <label ubLabel htmlFor="picture">Picture</label>
      <input ubInput id="picture" type="file" />
    </div>
  `,
})
export class InputFileDefault { }

Disabled

Preview

Code

import { UbInputDirective } from '@/components/ui/input'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'input-disabled-new-york',
  imports: [UbInputDirective],
  template: ` <input disabled ubInput type="text" placeholder="Email" /> `,
})
export class InputDisabledNewYork { }

import { UbInputDirective } from '@/components/ui/input'

import { Component } from '@angular/core'

@Component({
  standalone: true,
  selector: 'input-disabled-default',
  imports: [UbInputDirective],
  template: `<input disabled ubInput type="text" placeholder="Email" />`,
})
export class InputDisabledDefault { }

Card Separator