Define form input status

[joseegm]

goal: Define all status that can be used on a form input field.

Currently on v1.5.x we have
https://techne.yaas.io/components/Form-Elements.html
https://techne.yaas.io/components/Help-and-Validation.html

• Normal: input field untouched, with or without placeholder.
• Focused: signal when the input field have the focus.
• Invalid: signal when the input field entered information is not valid, in error or is empty on a mandatory field.
• Disabled: the input is displayed and cannot be used.

[joseegm]

Form inputs field Status

Status	Usage	Description
Normal	The default status	can have a place holder that will be displayed in lighter color than the usual text
Focused	Activated when the user move the focus to that input	highlight with a contrasting visual effect; a different coloured border
Invalid	Display when the entered information is not correct, empty or is invalid	highlight in an negative color; red for example
Valid	Not always used. Display when the entered information is valid	highlight with an positive color; green for example
Mandatory	The field have validation and the status can be mutated to Invalid or Valid	The usual way to signal the user a field is mandatory, per convention, is to display an * along with the label. Also the Mandatory input fields can have more contrast than the Normal input fields

[joseegm]

Visuals