Text inputs

Text fields

There are instances, sometimes in the same form, where you need users to enter both short and long form content. Allow the width of the text input box to reflect the length of the content you expect the user to enter. Placeholder text provides hints or examples of what to enter and disappears after the user begins entering data.
Border: #D0D2DA | Label text size: 12px | Label text colour: #000000 | Field text size: 16px | Field text colour: #AFB2C0 | Corner radius: 3px

:enabled

Label

Placeholder text

:hover

Label

Placeholder text

:focus

Label

Placeholder text

:active

Label

User Input Text

:filled

Label

User Input Text

:disabled

Label

Text fields build:

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Text area

:enabled

Label

0/100

Placeholder text

:hover

Label

0/100

Placeholder text

:focus

Label

Placeholder text

:active

Label

0/100

Lorem ipsum dolor sit amet,
consectetur adipis|

:filled

Label

0/100

Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et sed do eiusmod tempor incididunt ut labore...

:disabled

Label

0/100

Placeholder text

Text area build:

Thank you! Your submission has been received!

Oops! Something went wrong while submitting the form.

Validation

Effective error messaging can help the user to understand the problem and how to fix it. First, inform the user what has happened, then provide guidance on next steps or possible resolutions.
Border: #D50000 | Error text size: 12px | Error text colour: #D50000

Label

User Input Text

Error message here

Label

0/100

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et incididunt ut labore...

Error message here