Input Field

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:

Label	Label 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
}
}

Usually date can be selected from the date chart, if editableDate is sent as true then date can be editable without using date chart else it cannot be.

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
}
}

Usually time can be selected from the time chart, if editableTime is sent as true then time can be editable without using a time chart else it cannot be.

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”);}}
}
}

If the onIconSelection function is sent then that will be called when the geolocation icon is clicked. Else by default location details will be captured.

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:””}
}

Numeric value by default increases and decreases by step value 1.

But it can be configured using the step value sent as 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 which has resize option and the other is resizeSmart which increases the height automatically based on the content present inside.

For more information : Storybook for TextArea