Text Inputs

A region for text display or input via a keyboard. There are two types of text fields: Single and Multilined Text Fields.

Behaviours & States

Behaviour

Single Line Input

Single line inputs are typically used in forms or as search inputs. They can show a small icon (see sizing) on the right side to give more meaning to the text field if needed. 

Multiple Line Inputs

Multiple line inputs can be used for inputting larger amounts of text. This control should be used sparingly as we discourage a lot typing in the TV environment.

 

Multiple line inputs will scroll when typing beyond the limit of the container.

 

While typing, if the user's entry extends beyond the text field size, the beginning characters move offscreen in a marquee fashion. Using the 5-way, the user may reveal them again.

 

If the final entry is longer than the text field can display once the user has finished typing, the entry should truncate in the normal state with an ellipsis at the end.

 

In focus state, the full text will marquee for Single Line Text Field or the user can scroll for Multiline Text Field. Both types of text fields can display hint text; the text should be limited to a few words and should not go beyond the text field size. Once the user types in the field, the hint text is replaced by the user's entry; depending on context, the text may be retained or reset. The hint text is shown in both normal and focus states, but in the active state it is replaced with a blinking cursor.

 

The keyboard is to launch onscreen as soon as the user clicks on the first line of text entry on a page. Until the first text field has been selected the keyboard is to remain hidden so as to maximize screen real estate.

States

Normal (up/unpressed) The Text Field is available for use and is not selected.
Focus (hover) The Text Field has the current focus from the remote and is ready to be selected.
Active (down/pressed) The Text Field has been selected and ready to accept entry via the onscreen keyboard.

Sizing

A default minimum width of 300 pixels can be changed. Text entered can extend beyond the size of the text field.

 

The Multiple line Text Field can be defined as needed, while the Single Line Text Field is constrained to a single line.

 

The optional small icon that can be displayed in the single line text field is 20 px.

Illustration

TEXT_INPUTS.png

Navigation