NETS UI Guidelines

Inputs should aim to be easily identifiable and stand out and clearly and quickly transmit their current state.

Text

If used in forms leave enough breathing room, vertically, for each input to not smother the ones around.

Nets Inputs image — Empty

Nets Inputs image — Focused

Nets Inputs image — During input

Nets Inputs image — Regular

Nets Inputs image — With helper text

Nets Inputs image — With Error

Nets Inputs image — With Icon

Nets Inputs image — Disabled

Text area

Nets Inputs image — Empty

Nets Inputs image — Focused

Nets Inputs image — Filled in

Checkbox

Nets Inputs image — Not checked

Nets Inputs image — Checked

Nets Inputs image — Not checked - disabled

Nets Inputs image — Checked - disabled

Radio button

Nets Inputs image — Regular

Nets Inputs image — Disabled