# WOI TextField Component

WOI textfield component is a reusable React component for creating interactive buttons in your web application.

## Props

WOI TextField component accepts the following props:

- `type` (string): The type attribute specifies the type of input element to display. If the type attribute is not specified, the default type is 'text'.
- `label` (string): The content to be displayed inside the button. This is the text that appears as label.
- `labelFontSize` (string): The text size or font size of the label text. It determines how large or small the text appears.
- `labelFontWeight` (string): The font weight of the button's text. It controls the thickness or boldness of the text characters.
- `labelFontFamily` (string): The font-family property specifies the font for label text. The font-family property can hold several font names as a "fallback" system.
- `labelFontDecoration` (string): The text-decoration-style property sets the style of the label text decoration (like solid, wavy, dotted, dashed, double).
- `labelColor` (string): The text color of the label. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color.
- `placeholder` (string): The content to be displayed inside the button. This is the text that appears as placeholder.
- `placeholderFontSize` (string): The text size or font size of the placeholder text. It determines how large or small the text appears.
- `placeholderFontWeight` (string): The font weight of the button's text. It controls the thickness or boldness of the text characters.
- `placeholderFontFamily` (string): The font-family property specifies the font for a placeholder. The font-family property can hold several font names as a "fallback" system.
- `placeholderFontDecoration` (string): The text-decoration-style property sets the style of the placeholder text decoration (like solid, wavy, dotted, dashed, double).
- `placeholderColor` (string): The text color of the placeholder. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color.
- `supportingText` (string): The content to be displayed inside the button. This is the text that appears as supporting label.
- `supportingTextFontSize` (string): The text size or font size of the supporting text. It determines how large or small the text appears.
- `supportingTextFontWeight` (string): The font weight of the button's text. It controls the thickness or boldness of the text characters.
- `supportingTextFontFamily` (string): The font-family property specifies the font for supporting text. The font-family property can hold several font names as a "fallback" system.
- `supportingTextFontDecoration` (string): The text-decoration-style property sets the style of the supporting text decoration (like solid, wavy, dotted, dashed, double).
- `supportingTextColor` (string): The text color of the supporting text. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color.
- `fontSize` (string): The text size or font size of the imput's text. It determines how large or small the input appears.
- `fontWeight` (string): The font weight of the button's text. It controls the thickness or boldness of the text characters.
- `fontFamily` (string): The font-family property specifies the font for an input. The font-family property can hold several font names as a "fallback" system.
- `fontDecoration` (string): The text-decoration-style property sets the style of the input text decoration (like solid, wavy, dotted, dashed, double).
- `color` (string): The text color of the input text. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color.
- `backgroundColor` (string): The background color of the button. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color.
- `backgroundOpacity` (string):  opacity is a CSS property that allows you to change the opaqueness of an element. By default, all elements have a value of 1 .
- `borderColor` (string): The border-color property is used to set the color of the four borders. The color can be set by: name - specify a color name, like "red", Hex code (#RRGGBB), and RGB color (rgb(R, G, B)).
- `borderWidth` (string): The border-width property sets the width of an element's borders. Specified as a numerical value (e.g., pixels) or as a percentage.
- `borderRadius` (number): The borderRadius CSS property rounds the corners of an element's outer border edge. You can set a single radius to make circular corners, or two radii to make elliptical corners.
- `borderType` (string): The border-style property sets the style of an element's four borders. This property can have from one to four values. 
- `boxShadow` (string): The CSS box-shadow property is used to apply one or more shadows to an element. Specify a Horizontal and a Vertical Shadow.
- `multline` (number): Specifies the visible number of lines in a text area.
- `leftIcon` (string): An icon or image that appears before the button's text. It can be specified as a path to an icon file or a CSS class for an icon font.
- `leftIconSize` (number): The height and width of the icon, specified as a numerical value (e.g., pixels) or as a percentage of its container's width and height.
- `leftIconColor` (string): The color of the icon. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color.
- `rightIcon` (string): An icon or image that appears before the button's text. It can be specified as a path to an icon file or a CSS class for an icon font.
- `rightIconSize` (number): The height and width of the icon, specified as a numerical value (e.g., pixels) or as a percentage of its container's width and height.
- `rightIconColor` (string): The color of the icon. You can specify this using a CSS color value, such as a Hex code (#RRGGBB), an RGB color (rgb(R, G, B)), or a named color.
- `onComplete` (Function): A function executed when input is filled and press enter key to submit the form.
- `isDisabled` (boolean): A boolean flag that determines whether the button is in a disabled state. When set to true, the button is not clickable or interactive.