Generic Text Input Field Component

[csfar]

A simple single line text input component should be added to our framework. We are trying to avoid using TextField Component as the name of this component but we are having a hard time coming up with a new name. This component should have a title for the field, the input field itself and a placeholder. @VicFalcetta and I will be adding a low fidelity prototype to help in the process of building the component.

[csfar]

Here are a few images of the low fidelity prototype:

Component

Spec

Example

[VicFalcetta]

For the moment this was only to imagine how it would like. One thing that I would like to ask is for suggestions for the visuals and how to separate each component. Comment on things such as font size and style, gap between then and if it should have "physical" separators like lines or be in boxes.

[VicFalcetta]

Here it is a high-fidelity example that I made as I imagined it would be the One-Line text field for general purpose usage. It would be nice if you could provide some feedback on it, like what you would like to be changed.

[VicFalcetta]

Here are some variations that I made for the text box, including a secure version (that just adds a visual indication) and a multi-line text.

There are some variations that other developers have suggested, such as an email and telephone box. As deemed necessary we will provide more details and examples here.

[VicFalcetta]

To get a better view on how it would be on the screen of iPhone, here's a medium prototype so you can see the application:

[VicFalcetta]

As it was mentioned before and suggested by some of our members, here are some variations of the text field for email and phone number.

For convenience, please suggest any alternate versions or extra components through the discussion thread on GitHub so we have a more centralized discussion to aid the development.

[csfar]

We need to be careful with phone numbers since it changes quite a lot from place to place. We could look into how other frameworks/apps do phone verification. We may have to use an API for that, which is something we should discuss. Will we allow API calls from inside the framework for input validation? I think the email one is great! 👏

[VicFalcetta]

Yeah, I agree with the fact of being hard to verify all types and formats of numbers. One solution that I had though after I read your comment it was to implement our Regex verifier for some formats and let the developer create his own regex verifier as an attribute for the field.

One more thing, as per request from one of our development team members and suggestion from one of PO was to create a use case for our framework. So, in order to satisfy it I created one in Portuguese (the dev can write in any language he wants the labels) when you order food and a problem happens. This is what I consider to be one High-fidelity prototype for our framework.

[Galdineris]

Thread locked by #13