Input Field

Description

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.

Configuration

Config for TextInput Component (using FormComposerV2)

Type: text

{
inline:true,
label:"Example",
placeholder:"Enter Text"
isMandatory: true,
type:"text",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultText",
error:"Error Message",
validation:{minLength:2, maxLength:10},
customIcon:"DownloadIcon",
onIconSelection:{(e)=>{console.log("clicked");}}
prefix:"$",
suffix:"$",
wrapLabel:true
}
}

Below are the details for the type: text:

LabelLabel for text field

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

Example Usage of TextInput Component

<TextInput
type="text"
disabled={false}
populators={{customIcon: "MyLocation"}
onIconSelection={()=>{console.log("selected")}
></TextInput>

For more information: StoryBook for Text Input field

Type: date

{
label:"ExampleDate",
placeholder:"dd/mm/yyyy"
isMandatory: true,
type:"date",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultDate",
error:"Error Message",
editableDate:true
}
}

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.

For more information: StoryBook for date field

Type: time

{
label:"ExampleTime",
placeholder:"placeholder"
isMandatory: true,
type:"time",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultTime",
error:"Error Message",
editableTime:true
}
}

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.

For more information: StoryBook for time field

Type: geolocation

{
label:"ExampleGeolocation",
placeholder:"placeholder"
isMandatory: true,
type:"geolocation",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultGeolocation",
error:"Error Message",
onIconSelection:{(e)=>{console.log(โ€œclickedโ€);}}
}
}

Click on the geolocation icon to call and activate the onIconSelection function. Otherwise, the location details are captured by default.

For more information: StoryBook for Geolocation field

Type: numeric

{
label:"ExampleNumeric",
placeholder:"placeholder"
isMandatory: true,
type:"numeric",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultGeolocation",
error:"Error Message",
},
config:{step:โ€โ€}
}

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.

For more information: StoryBook for Numeric field

With Prefix and Suffix

{
label:"ExamplePrefix",
placeholder:"placeholder"
isMandatory: true,
type:"text",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultText",
error:"Error Message",
prefix:โ€+91โ€
},
}
{
label:"ExampleSuffix",
placeholder:"placeholder"
isMandatory: true,
type:"text",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultText",
error:"Error Message",
suffix:โ€Kgโ€
},
}

Type: password

{
label:"ExamplePassword",
placeholder:"placeholder"
isMandatory: true,
type:"password",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultText",
error:"Error Message",
},
}

For more information: Storybook for password field

Type: search

{
label:"ExampleSearch",
placeholder:"placeholder"
isMandatory: true,
type:"search",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultSearch",
error:"Error Message",
onIconSelection:{(e)=>{console.log(โ€œclickedโ€);}}
}
}

Config for TextArea Component (using FormComposerV2)

{
label:"ExampleTextArea",
placeholder:"placeholder"
isMandatory: true,
type:"textarea",
disable:false,
nonEditable:false,
infoMessage:"Sample info message"
description:"Help Text"
charCount:true,
withoutLabel:false,
populators:{
name:"defaultSearch",
error:"Error Message",
resizeSmart: false,
}

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.

For more information: Storybook for TextArea

Last updated

All content on this page by eGov Foundation is licensed under a Creative Commons Attribution 4.0 International License.