Tailwind CSS Textarea with Angular

Integrate our Tailwind CSS Text Area built with Angular to capture extensive user input on your website or applications.

Text areas are invaluable when you need to collect more extensive user feedback, comments, or any multi-line input. A good text area should provide a smooth typing experience, show a clear boundary, and allow easy navigation.

Discover our Angular Text Area designed with Tailwind CSS, perfect for those longer inputs.

You first need to import the DUITextarea Module into your application module

     import { DUITextarea } from "david-ui-angular";
 
  @NgModule({
    declarations: [AppComponent],
    imports: [BrowserModule, DUITextarea],
    providers: [],
    bootstrap: [AppComponent],
  })
  export class AppModule {}

Message

      
  <dui-input label="Message"></dui-input>

Textarea Disabled

You can disable the textarea component by manipulating the disabled attribute of the component

Message

     
  <dui-textarea [disabled]="true" label="Message"></dui-textarea>

Textarea Variant

You can use different variants of the textarea component by manipulating the variant attribute of the component

Message

      
    <dui-textarea variant="outlined" label="Message"></dui-textarea>
    <dui-textarea variant="static" label="Message"></dui-textarea>
    <dui-textarea variant="standard" label="Message"></dui-textarea>

Textarea Sizes

The Textarea component comes with 2 different sizes that you can change it using the size prop.

Textarea Medium

Textarea Large

      
  <dui-textarea size="md" label="Textarea Medium" ></dui-textarea>
  <dui-textarea size="lg" label="Textarea Large" ></dui-textarea>

Textarea Colors

You can use different colors of the textarea component by manipulating the color attribute of the component

Gray Message

Green Message

Red Message

     
  <dui-textarea color="gray" label="Gray Message"></dui-textarea>
  <dui-textarea color="green" label="Green Message"></dui-textarea>
  <dui-textarea color="red" label="Red Message"></dui-textarea>

textarea Properties

The following properties are available for dui-textarea component. These are the custom properties that we've added for the textarea component and you can use all the other native properties as well.

Attribute	Type	Description	Default
`variant`	`Variant`	change textarea variant	`filled`
`color`	`Color`	change textarea color	`gray`
`className`	`string`	Add custom className for textarea	`''`
`size`	`boolean`	Change textarea size	`md`
`label`	`string`	Label for textarea	`Enter your text`
`name`	`string`	Name prop for textarea	`''`
`type`	`string`	Type prop for textarea	`text`
`cols`	`string`	Columns in textarea	`text`
`rows`	`string`	Rows in textarea	`text`
`error`	`boolean`	Change textarea state to error	`false`
`success`	`boolean`	Change textarea state to success	`false`
`disabled`	`boolean`	Disable textarea	`false`
`required`	`boolean`	Make textarea as required	`false`
`readonly`	`boolean`	Make textarea readonly	`false`

Type - Variant

     
  type variant = "standard" | "outlined" | "static"

Type - Size

     
  type size = 'md' | 'lg';

Type - Color

     type colors =
  | "blue-gray"
  | "gray"
  | "brown"
  | "deep-orange"
  | "orange"
  | "amber"
  | "yellow"
  | "lime"
  | "light-green"
  | "green"
  | "teal"
  | "cyan"
  | "light-blue"
  | "blue"
  | "indigo"
  | "deep-purple"
  | "purple"
  | "pink"
  | "red";

	import { DUITextarea } from "david-ui-angular";

	@NgModule({
	declarations: [AppComponent],
	imports: [BrowserModule, DUITextarea],
	providers: [],
	bootstrap: [AppComponent],
	})
	export class AppModule {}


	<dui-textarea [disabled]="true" label="Message"></dui-textarea>


	<dui-textarea variant="outlined" label="Message"></dui-textarea>
	<dui-textarea variant="static" label="Message"></dui-textarea>
	<dui-textarea variant="standard" label="Message"></dui-textarea>


	<dui-textarea size="md" label="Textarea Medium" ></dui-textarea>
	<dui-textarea size="lg" label="Textarea Large" ></dui-textarea>


	<dui-textarea color="gray" label="Gray Message"></dui-textarea>
	<dui-textarea color="green" label="Green Message"></dui-textarea>
	<dui-textarea color="red" label="Red Message"></dui-textarea>

	type colors =
	\| "blue-gray"
	\| "gray"
	\| "brown"
	\| "deep-orange"
	\| "orange"
	\| "amber"
	\| "yellow"
	\| "lime"
	\| "light-green"
	\| "green"
	\| "teal"
	\| "cyan"
	\| "light-blue"
	\| "blue"
	\| "indigo"
	\| "deep-purple"
	\| "purple"
	\| "pink"
	\| "red";