Learn
Color for UI

Forms

Form inputs are another type of component that use color to indicate an action to a user. Similar to buttons, form inputs have certain states.

There is the default state, which is how the user views the inputs when they first arrive at a page.

The second state is the selected, or active, state. These provide the user with a visual cue that they have highlighted the field and have the ability to type within it. This is typically achieved by using a border color or a box shadow effect.

If the input field is unable to be edited or typed within, there should be a disabled state as well. This should render much like the disabled button, in that it is grayed out.

Inputs also have other colors that indicate success and failure. These are called semantic colors.

Community Forums
Get help and ask questions in the Codecademy Forums
Report a Bug
If you see a bug or any other issue with this page, please report it here.