## Text Inputs

A concise input component for capturing user data in your application.
Code

Type | Code | Demo
--- | --- | ---
Input Text | `{{ inputTextCode }}` |
Email | `{{ inputEmailCode }}` |
Addresses Auto complete | `{{ inputAddressCode }}` |
Textarea | `{{ inputTextareaCode }}` |
Card Number | `{{ inputCardNumberCode }}` |
Card Expiry | `{{ inputCardExpiryCode }}` |

Required Imports
import { InputFieldModule } from 'nextsapien-component-lib';
Input and Output Properties

Type | Name | Description | Default | Required
--- | --- | --- | --- | ---
Input | name | The name attribute for the text input field. | n/a | true
Input | autocomplete | Autocomplete attribute for the text input field. | n/a | true
Input | label | The label for the text input field. | n/a | true
Input | placeholder | Placeholder text for the text input field. | n/a | false
Input | type | The type of the text input field (e.g., 'text', 'email'). | n/a | true
Input | readonly | Specifies if the text input field is read-only. | false | false
Input | focus | Determines if the text input field should be focused on load. | false | false
Input | enableGoogleAddress | Enables Google address autocomplete for the text input field. | false | false
Input | locationAutocompleteConfig | Configuration object for Google Maps location autocomplete. | n/a | false
Input | defaultLocation | Coordinates for the default location (latitude and longitude). | n/a | false
Input | mask | Mask for formatting the text input value. | n/a | false
Input | prefix | Prefix displayed before the text input value. | n/a | false
Input | suffix | Suffix displayed after the text input value. | n/a | false
Input | maxLength | The maximum number of characters allowed in the text input field. | 20 | false
Input | value | The value of the text input field. | n/a | false
Input | address | Address used when Google address autocomplete is enabled. | n/a | true
Input | textarea | Determines if the text input field is a textarea. | false | false
Input | resize | Specifies if the textarea is resizable. | false | false
Input | patterns | Defines custom patterns for text input masking. | n/a | false
Input | trimWhiteSpace | Specifies if whitespace should be trimmed from the input. | true | false
Output | locationChange | Emits an event when the location is changed using Google address autocomplete. | n/a | false
Output | keyDown | Emits an event when a key is pressed in the text input field. | n/a | false
Output | onBlur | Emits an event when the text input field loses focus. | n/a | false

CSS Properties

Name | Description
--- | ---
`--border-radius` | Border radius of input and it's container.
`--input-field-margin` | Margin around input field to separate other content like error messages.
`--label-font-size-floated` | Label font size after floated to top.
`--label-color` | Label text color.
`--label-position-left` | Label position distance from left.
`--label-position-top` | Label position distance from top.
`--label-float-position-top` | Label top position after floated to top.
`--label-padding` | Label padding to make space around.
`--label-font-family` | Font family for label.
`--label-font-style` | Font style for label.
`--label-font-weight` | Font weight for label.
`--label-font-size` | Label font size.
`--label-line-height` | Label line height.
`--input-font-color` | Input text color.
`--input-font-family` | Font family for text input field.
`--input-font-size` | Font size for input text.
`--height` | Height of the text input field.
`--width` | Width of the text input field.
`--input-border` | Border around text input field only.
`--input-padding` | Text input field space inside.
`--box-shadow` | Text input field box shadow.
`--border` | Border around the full component.