Docs
Input
Input
Displays a form input field or a component that looks like an input field.
Loading...
Loading...
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
npx shadcn-ng@latest add input
npm
yarn
pnpm
bun
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-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(),
),
)
}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(),
),
)
}Update the import paths to match your project setup.
Usage
import { UbInputDirective } from "@/components/ui/input.directive";<input type="text" ubInput />Examples
Default
Loading...
Loading...
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
Loading...
Loading...
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
Loading...
Loading...
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 { }