Picchu

Password box

Guidance

A password box allows users to input a secure code or password.

The password box is designed to be used in conjunction with other elements (i.e. form elements, submit button, etc.) in cases where a secure code or password is needed.

  • Box height: 36px minimum
  • Stroke: 2px (rest state: #767676; hover state: #464646; active state: #0078D7)
  • Hint text inside the box: Segoe UI, 15px, #767676
  • Dots (and hidden text): #2F2F2F (Segoe UI, 15px)
  • Icon: RevealPassword E890, 15px (rest state: n/a; typing state: #2F2F2F; hover state: #0078D7; pressed state: #FFFFFF)
  • Icon background: 28px X 28px (rest state: n/a; typing state: #FFFFFF; hover state: #FFFFFF; pressed state: #0078D7)
  • Control header (optional): Segoe UI, 15px, #2F2F2F

Demo

See the Pen Password Demo by Microsoft.com (@microsoft) on CodePen.

Resources