Styleguide
NBCUX LAB
The most used component, text fields allow users to input the necessary information to create and edit content. Text fields allow the user to input text, select text, and lookup data via auto-completion.
Series General Info Card
When the user engages with the text input field, the floating inline labels move to float above the field, and takes on the theme’s accent color
empty text fields
Multi-line text fields automatically break to a new line for overflow text and scroll vertically when the cursor reaches the lower edge.
Series General Info Card
Single-line fields automatically scroll their content to the left as the text input cursor reaches the right edge of the input field. Single line text fields have character limits.
Series General Info Card
These auto-complete text fields present real-time suggestions or completions in dropdowns, so users can enter information more accurately and efficiently. When you select the field you are only given the option to search pre-created content.
Series General Info Card
These auto-complete text fields present real-time suggestions or completions in dropdowns, so users can enter information more accurately and efficiently. This field allows you to begin typing in the field to search for previously created content, or to create new content.
Series General Info Card
To indicate that a field is required, display an asterisk (*) next to the field. Each card with required fields will have a count of the number of required fields next to the name of the card.
General info card on gallery page
Helper text, or hint text, appears below the text field and is persistently visible. Helper text turns into Error text on completion when a user error
A validation text replaces the helper text when a required field is empty. It needs to directly address what can be done in order to resolve the error. It is written in a full sentence with active, positive tone.
Multiple items selected on Asset Library page