Picchu

Text box

Guidance

A text box allows users to input and edit data.

The text box consists of a box with header and is designed to be used in conjunction with other elements (i.e. form elements, submit button, etc.) in cases where collection of data is needed.

Best practices

  • When reasonable, automatically set focus to the primary text field.
  • Make the size of your text boxes about a third wider than the longest anticipated input.
  • Use a limit for the length of the input text when you can. Since text box input may vary from one use case to another, the length should be limited to the maximum number of characters required. For example, if the valid input is a number between 0 and 9999, use a numeric text box that is limited to four characters.
  • Work with your developers to define input masks as appropriate to govern what a user is allowed to enter in as input in a text box. For example, restricting input to alphabetic characters only, numerals only, or restricting certain characters, etc.
  • Consider using a dropdown menu instead if the valid input options can be pre-defined.
  • Consider using a calendar component for date entry.

Styling

  • Box height: 36px minimum
  • Stroke: 1px (rest state: #767676; hover state: #464646; active state: #0078D7)
  • Hint text inside the box (optional): Segoe UI, 15px, #767676
  • User-entered text: Segoe UI, 15px (on white: #2F2F2F; on black: #FFFFFF)
  • Icon: ChromeClose E8BB, 16px (rest state: n/a; typing state: #767676; hover(over icon) 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: Segoe UI, 15px (on white: #2F2F2F; on black: #FFFFFF)

Demo

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

Resources