[[TOC]]

• Color variables defined
• Element spacing variables defined
• Text variables defined

Based on the properties defined in Identify Form elements, create the different form elements identified.

Check in the corresponding place in the Style Guide if these form elements are displayed correctly:

Sometimes, whenever it is required to apply border styling when the field is focused or hovered, it may trigger some unexpected behaviors to the element or to the rest of the website. this is because when the field as default does not have a border set and when we click on it (focused), it will make the border to appear and which means the renderization needs to add the amount of pixels it was defined to it that did not exist before

It can be seen the text is moved by a a small fraction of pixels to the right when focused

This can be avoided by adding the same border size to the default element but set it as transparent. A proper testing to this can be done by writing done text to the field (or select a field if its a dropdown) and check if the element is not changing size or if the rest of the elements above/below are not moved.

Each element must be associated with a respective class in order to provide consistent styling:

Class	Element
c-form-textfield	Text Field
c-form-textarea	Text Area
c-form-dropdown	Drop Down
c-form-label	Label
c-form-radio	Radio button
c-form-checkbox	Check box
c-button-m cc-primary cc-secondary	Button