Input (TextField)

Text area for user input. Usually accompanied with a label. Optionally required.

Example

Default Styles

• Font: Roboto
• Font Size: 14px
• Line Height: inherited
• Text Color: --main-color-gray-black: #272727;
• Alignment: left
• Height: 36px
• Width: 300px
• Background Color: --main-color-white: #ffffff;
• Padding Top: 10px
• Padding Right: 10px
• Padding Bottom: 10px
• Padding Left: 10px
• Margin Top: auto
• Margin Right: auto
• Margin Bottom: auto
• Margin Left: auto
• Border: 1px
• Border Radius: 3px
• Border Color: --main-color-gray-dark: #c1c1c1;

Variations

Global Search

• Font Size: 16px

States

Disabled

• Background Color: --main-color-gray-light: #e0e0e0;

Focused

• Border Color: --main-color-blue: #1974c7;

HTML

Notes

• Whenever possible, use the label element to associate text with form elements explicitly. The for attribute of the label must exactly match the id of the form control.