Inputs

Input

Props

Name	Type	Default	Description
name	string	-	Input's name being registered.
placeholder	string	''	Placeholder text displayed in the input.
showError	boolean	true	Determines if errors should be displayed. (Particularly needed is you dont want to show validation error in the field)
isDisabled	boolean	false	Disables the input field when true.
type	string	'text'	Specifies the type of input (e.g., text, password).
id	string	-	The unique identifier for the input field.
maxLength	number	-	Maximum number of characters allowed.
endAdornment	ReactNode	<></>	A React component displayed at the end of the input.
dataTestId	string	''	A data-testid attribute for testing purposes.
label	string	-	The label displayed for the component. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
labelConfig	object	{ labelClassName: {}, labelTextClassName: {} }	Configuration for customizing label styles. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
id	string	-	The unique identifier for the component. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
tooltip	string	''	Tooltip content to display additional information. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
dependsOnField	object	{ fieldName: '', value: [] }	Defines dependencies on another field (To show or hide this component,based on state of some field), specifying the field name and expected value(s). If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.

Config example

const inputConfig = {
  type: 'input',
  data: {
    id: 'username',
    name: 'username',
    label: 'Username *',
    type: 'text',
    placeholder: 'Enter your username',
    dataTestId: 'username-input',
    labelConfig: {
      labelClassName: { fontWeight: 'bold' },
      labelTextClassName: { fontSize: '14px', color: 'gray' }
    },
    tooltip: 'Your unique username for logging in. Use 3-20 characters.',
    dependsOnField: { fieldName: 'hasAccount', value: [true] }
  }
}

Masked input

Props

Name	Type	Default	Description
name	string	-	Input's name being registered.
placeholder	string	''	Placeholder text displayed in the input.
showError	boolean	true	Determines if errors should be displayed. (Particularly needed is you dont want to show validation error in the field)
isDisabled	boolean	false	Disables the input field when true.
id	string	-	The unique identifier for the input field.
maxLength	number	-	Maximum number of characters allowed.
maskChar	string	-	Character to cover unfilled editable parts of mask.
mask	string	-	Pattern or template for input masking.
dataTestId	string	''	A data-testid attribute for testing purposes.
label	string	-	The label displayed for the component. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
labelConfig	object	{ labelClassName: {}, labelTextClassName: {} }	Configuration for customizing label styles. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
id	string	-	The unique identifier for the component. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
tooltip	string	''	Tooltip content to display additional information. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
dependsOnField	object	{ fieldName: '', value: [] }	Defines dependencies on another field (To show or hide this component,based on state of some field), specifying the field name and expected value(s). If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.

Config example

const maskedInputConfig = {
  type: 'masked-input',
  data: {
    id: 'maskedInput',
    name: 'phoneNumber',
    label: 'Phone Number *',
    placeholder: '(999) 999-9999',
    mask: '(999) 999-9999',
    dataTestId: 'phone-number-input',
    tooltip: 'Enter your phone number in the format: (123) 456-7890',
    labelConfig: {
      labelClassName: { fontWeight: 'bold' },
      labelTextClassName: { fontSize: '14px', color: 'gray' }
    }
  }
}

Password

Props

Name	Type	Default	Description
name	string	-	Input's name being registered.
placeholder	string	''	Placeholder text displayed in the input.
showError	boolean	true	Determines if errors should be displayed. (Particularly needed is you dont want to show validation error in the field)
isDisabled	boolean	false	Disables the input field when true.
type	string	'text'	Specifies the type of input (e.g., text, password).
id	string	-	The unique identifier for the input field.
maxLength	number	-	Maximum number of characters allowed.
endAdornment	ReactNode	<></>	A React component displayed at the end of the input.
dataTestId	string	''	A data-testid attribute for testing purposes.
label	string	-	The label displayed for the component. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
labelConfig	object	{ labelClassName: {}, labelTextClassName: {} }	Configuration for customizing label styles. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
id	string	-	The unique identifier for the component. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
tooltip	string	''	Tooltip content to display additional information. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
dependsOnField	object	{ fieldName: '', value: [] }	Defines dependencies on another field (To show or hide this component,based on state of some field), specifying the field name and expected value(s). If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.

Config example

const passwordInputConfig = {
  type: 'password',
  data: {
    id: 'password',
    name: 'password',
    label: 'Password *',
    type: 'password',
    placeholder: 'Enter your password',
    dataTestId: 'password-input',
    tooltip:
      'Password must be 8-32 characters and include at least one number and one special character.',
    labelConfig: {
      labelClassName: { fontWeight: 'bold' },
      labelTextClassName: { fontSize: '14px', color: 'gray' }
    }
  }
}

Textarea

Props

Name	Type	Default	Description
name	string	-	Input's name being registered.
placeholder	string	''	Placeholder text displayed in the input.
showError	boolean	true	Determines if errors should be displayed. (Particularly needed is you dont want to show validation error in the field)
isDisabled	boolean	false	Disables the input field when true.
type	textarea	'textarea'	Input type should be set to textarea
id	string	-	The unique identifier for the input field.
maxLength	number	-	Maximum number of characters allowed.
endAdornment	ReactNode	<></>	A React component displayed at the end of the input.
dataTestId	string	''	A data-testid attribute for testing purposes.
label	string	-	The label displayed for the component. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
labelConfig	object	{ labelClassName: {}, labelTextClassName: {} }	Configuration for customizing label styles. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
id	string	-	The unique identifier for the component. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
tooltip	string	''	Tooltip content to display additional information. If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.
dependsOnField	object	{ fieldName: '', value: [] }	Defines dependencies on another field (To show or hide this component,based on state of some field), specifying the field name and expected value(s). If component is used as a standalone component, it needs to be wrapped with withLabelAndTooltip.

Config example

{
  type: 'textarea',
  data: {
    id: 'projectDescription',
    name: 'projectDescription',
    label: 'Project Description',
    placeholder: 'Describe the project details',
    type: 'textarea'
  }
}