Tailwind CSS Input with Angular

Use our Tailwind CSS Input built with Angular to collect and process user data on your website or applications.

Inputs are pivotal UI components in web design, allowing users to interact by providing information, such as text, numbers, or dates, to a website or application. For smooth user interaction, inputs should provide clear visual feedback, including placeholder text, a focus state, or even error messages when data is incorrect.

Below we present you our Angular Input example crafted with Tailwind CSS that ensures seamless user experience and facilitates the creation of enterprise-level applications with proficiency. Check it out!

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

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

Username

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

Input Variant

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

Outlined

Standard

Static

      
  <dui-input label="Username"></dui-input>
  <dui-input variant="standard" label="Username"></dui-input>
  <dui-input variant="static" label="Username"></dui-input>

Input Sizes

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

Outlined Medium

Outlined Large

      
  <dui-input size="md" label="Outlined Medium"></dui-input>
  <dui-input size="lg" label="Outlined Large"></dui-input>

Input Colors

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

Username

     
  <dui-input color="purple" label="Username"></dui-input>
  <dui-input color="yellow" label="Username"></dui-input>
  <dui-input color="green" label="Username"></dui-input>

Input Properties

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

Attribute	Type	Description	Default
`variant`	`Variant`	change input variant	`filled`
`color`	`Color`	change input color	`gray`
`className`	`string`	Add custom className for input	`''`
`size`	`boolean`	Change input size	`md`
`label`	`string`	Label for input	`Enter your text`
`name`	`string`	Name prop for input	`''`
`type`	`string`	Type prop for input	`text`
`error`	`boolean`	Change input state to error	`false`
`success`	`boolean`	Change input state to success	`false`
`disabled`	`boolean`	Disable input	`false`
`required`	`boolean`	Make input as required	`false`
`readonly`	`boolean`	Make input 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 { DUIInput } from "david-ui-angular";

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


	<dui-input label="Username"></dui-input>
	<dui-input variant="standard" label="Username"></dui-input>
	<dui-input variant="static" label="Username"></dui-input>


	<dui-input size="md" label="Outlined Medium"></dui-input>
	<dui-input size="lg" label="Outlined Large"></dui-input>


	<dui-input color="purple" label="Username"></dui-input>
	<dui-input color="yellow" label="Username"></dui-input>
	<dui-input color="green" label="Username"></dui-input>

	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";