Docs
Textarea
Textarea
Displays a form textarea or a component that looks like a textarea.
Loading...
Loading...
import { Component } from '@angular/core'
import { UbTextAreaDirective } from '~/components/ui/textarea'
@Component({
standalone: true,
selector: 'textarea-demo-new-york',
imports: [UbTextAreaDirective],
template: `<textarea ubTextarea placeholder="Type your message here."></textarea>`,
})
export class TextAreaDemoNewYork { }import { Component } from '@angular/core'
import { UbTextAreaDirective } from '~/components/ui/textarea'
@Component({
standalone: true,
selector: 'textarea-demo-default',
imports: [UbTextAreaDirective],
template: `<textarea ubTextarea placeholder="Type your message here."></textarea>`,
})
export class TextAreaDemoDefault { }Installation
pnpm dlx shadcn-ng@latest add textarea
npx shadcn-ng@latest add textarea
npx shadcn-ng@latest add textarea
bunx --bun shadcn-ng@latest add textarea
Copy and paste the following code into your project.
import { computed, Directive, input } from '@angular/core'
import { cn } from '~/lib/utils'
@Directive({
standalone: true,
selector: 'ubTextarea',
host: {
'[class]': 'computedClass()',
},
})
export class UbTextAreaDirective {
class = input<string>()
computedClass = computed(() =>
cn('flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm', this.class()),
)
}import { computed, Directive, input } from '@angular/core'
import { cn } from '~/lib/utils'
@Directive({
standalone: true,
selector: 'ubTextarea',
host: {
'[class]': 'computedClass()',
},
})
export class UbTextAreaDirective {
class = input<string>()
computedClass = computed(() =>
cn('flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background 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 md:text-sm', this.class()),
)
}Update the import paths to match your project setup.
Usage
import { UbTextareaDirective } from "~/components/ui/textarea"<textarea ubTextarea></textarea>Examples
Default
Loading...
Loading...
import { Component } from '@angular/core'
import { UbTextAreaDirective } from '~/components/ui/textarea'
@Component({
standalone: true,
selector: 'textarea-demo-new-york',
imports: [UbTextAreaDirective],
template: `<textarea ubTextarea placeholder="Type your message here."></textarea>`,
})
export class TextAreaDemoNewYork { }import { Component } from '@angular/core'
import { UbTextAreaDirective } from '~/components/ui/textarea'
@Component({
standalone: true,
selector: 'textarea-demo-default',
imports: [UbTextAreaDirective],
template: `<textarea ubTextarea placeholder="Type your message here."></textarea>`,
})
export class TextAreaDemoDefault { }Disabled
Loading...
Loading...
import { Component } from '@angular/core'
import { UbTextAreaDirective } from '~/components/ui/textarea'
@Component({
standalone: true,
selector: 'textarea-disabled-new-york',
imports: [UbTextAreaDirective],
template: `<textarea ubTextarea placeholder="Type your message here." disabled></textarea>`,
})
export class TextAreaDisabledNewYork { }import { Component } from '@angular/core'
import { UbTextAreaDirective } from '~/components/ui/textarea'
@Component({
standalone: true,
selector: 'textarea-disabled-default',
imports: [UbTextAreaDirective],
template: `<textarea ubTextarea placeholder="Type your message here." disabled></textarea>`,
})
export class TextAreaDisabledDefault { }With Label
Loading...
Loading...
import { Component } from '@angular/core'
import { UbLabelDirective } from '~/components/ui/label'
import { UbTextAreaDirective } from '~/components/ui/textarea'
@Component({
standalone: true,
selector: 'textarea-with-label-new-york',
imports: [UbTextAreaDirective, UbLabelDirective],
template: `
<div class="grid w-full gap-1.5">
<label ubLabel for="message">Your message</label>
<textarea ubTextarea placeholder="Type your message here." id="message"></textarea>
</div>`,
})
export class TextAreaWithLabelNewYork { }import { Component } from '@angular/core'
import { UbLabelDirective } from '~/components/ui/label'
import { UbTextAreaDirective } from '~/components/ui/textarea'
@Component({
standalone: true,
selector: 'textarea-with-label-default',
imports: [UbTextAreaDirective, UbLabelDirective],
template: `
<div class="grid w-full gap-1.5">
<label ubLabel for="message">Your message</label>
<textarea ubTextarea placeholder="Type your message here." id="message"></textarea>
</div>`,
})
export class TextAreaWithLabelDefault { }With Text
Loading...
Loading...
import { Component } from '@angular/core'
import { UbLabelDirective } from '~/components/ui/label'
import { UbTextAreaDirective } from '~/components/ui/textarea'
@Component({
standalone: true,
selector: 'textarea-with-text-new-york',
imports: [UbTextAreaDirective, UbLabelDirective],
template: `
<div class="grid w-full gap-1.5">
<label ubLabel for="message">Your message</label>
<textarea ubTextarea placeholder="Type your message here." id="message"></textarea>
<p class="text-sm text-muted-foreground">
Your message will be copied to the support team.
</p>
</div>`,
})
export class TextAreaWithTextNewYork { }import { Component } from '@angular/core'
import { UbLabelDirective } from '~/components/ui/label'
import { UbTextAreaDirective } from '~/components/ui/textarea'
@Component({
standalone: true,
selector: 'textarea-with-text-default',
imports: [UbTextAreaDirective, UbLabelDirective],
template: `
<div class="grid w-full gap-1.5">
<label ubLabel for="message">Your message</label>
<textarea ubTextarea placeholder="Type your message here." id="message"></textarea>
<p class="text-sm text-muted-foreground">
Your message will be copied to the support team.
</p>
</div>`,
})
export class TextAreaWithTextDefault { }With Button
Loading...
Loading...
import { Component } from '@angular/core'
import { UbButtonDirective } from '~/components/ui/button'
import { UbTextAreaDirective } from '~/components/ui/textarea'
@Component({
standalone: true,
selector: 'textarea-with-label-new-york',
imports: [UbTextAreaDirective, UbButtonDirective],
template: `
<div class="grid w-full gap-2">
<textarea ubTextarea placeholder="Type your message here."></textarea>
<button ubButton>Send message</button>
</div>`,
})
export class TextAreaWithButtonNewYork { }import { Component } from '@angular/core'
import { UbButtonDirective } from '~/components/ui/button'
import { UbTextAreaDirective } from '~/components/ui/textarea'
@Component({
standalone: true,
selector: 'textarea-with-label-default',
imports: [UbTextAreaDirective, UbButtonDirective],
template: `
<div class="grid w-full gap-2">
<textarea ubTextarea placeholder="Type your message here."></textarea>
<button ubButton>Send message</button>
</div>`,
})
export class TextAreaWithButtonDefault { }