Input Field
Last updated
Last updated
All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.
The Input field enables users to interact with the application through content input and data. The component allows users to input responses or data based on specific requirements.
Type: text
Below are the details for the type: text:
Example Usage of TextInput Component
Type: date
The date can be selected from the date chart. If editableDate is set to true, the date can be edited without using the date chart; otherwise, it cannot be edited.
Type: time
The time can be selected from the time chart. If editableTime
is set to true
, the time can be edited without using the time chart; otherwise, it cannot be edited.
Type: geolocation
Click on the geolocation icon to call and activate the onIconSelection function. Otherwise, the location details are captured by default.
Type: numeric
The numeric value by default increases and decreases by step value 1. But it can be configured using the step value sent as a prop in the config.
With Prefix and Suffix
Type: password
Type: search
There are two variants for the textarea - one has a resize option and the other is resizeSmart which auto-adjusts the height based on the input content.
Label | Label for text field |
---|
For more information:
For more information:
For more information:
For more information:
For more information:
For more information:
For more information:
placeholder | Placeholder for the text field |
isMandatory | Whether field is mandatory or not |
disable | To disable the text field (no interaction will be possible if disabled) |
nonEditable | To make text field readOnly |
infoMessage | Information to be shown when hovered on the info icon beside the label |
description | Help text for the text field |
charCount | Number of characters in the input value |
withoutLabel | Default will be false, if sent as true then label won't be shown |
populators | Name : Mandatory field Error : Error message to be shown Validations: if required like maxlength, minlength etc customIcon: to show any icon inside the text field (can be sent as a string) onIconSelection: IconSelection function Prefix: To show prefix Suffix: to show suffix |
wrapLabel | Can wrap label to the next line in desktop and tablet screens |