Lexicon
LexiconLexicon
v 2.0v 1.0
  • Get Started
  • Foundations
    • Animations
    • Color
    • Grid
    • Layout
      • Full Box
      • Cards Layout
      • Form Box
      • Sidebar + Box
    • Typography
    • Writing Style
  • Core Components
    • Actions Definition
    • Alerts
    • Badges
    • Buttons
    • Cards
    • Charts
      • Charts
      • Colors
      • Interaction
      • Bar Chart
      • Donut Chart
      • Heatmap Chart
      • Line Chart
      • Pie Chart
      • Predictive Forecast Chart
      • Stacked Bar Chart
    • Confirmation Message
    • Dataset Display
    • Drag and Drop
    • Dropdown Menu
    • Empty States
    • Forms
      • Forms
      • Forms Hierarchy
      • Forms Navigation
      • Forms Rules
      • Forms Validation
      • Checkbox, Radio, Toggle
      • Color Picker
      • Date & Time Pickers
      • Multi Step Form
      • Multi Step Form Simplified
      • Selectors
      • Slider
      • Text Input
      • Text Input Group
      • Text Input Localizable
      • Text Input Variations
    • Icons
    • Labels
    • Link
    • List
    • Loading Indicator
    • Modals
    • Navigation
      • Breadcrumb
      • Navbar
      • Vertical Navigation
    • Pagination
    • Popovers and Tooltips
    • Progress Bar
    • Sidebar
    • Stickers
    • Table
      • Table
      • Inline Edit Table
    • Tabs
    • Toolbars
      • Toolbar
      • Management Toolbar
      • Upper Toolbar
  • Satellite Components
    • File Upload
    • Image Selector
    • Miller Columns
    • Navigation
      • Navigation
      • Header
    • Sidebar
      • Info Panel
      • Product Menu
    • Sites
      • Sites
      • Asset Title Bar
      • Asset Toolbar
      • Buttons
      • Profile Info
      • Widget Title Bar
  • Templates
    • Dataset Template
    • Form Template
  • Examples
    • Asset Metrics Dashboard
    • Page Distribution
    • Partner Portal
  • News
    • News
    • Status
  • Resources

Text Input

VIEW IN CLAY
A description of the different text input types, including usage and validation states.

Text Field

A text field lets users enter data into the system to be processed.

default empty state

Usage

Text fields can have help text. Lexicon provides two different mechanisms to provide help:

  • Help text below the field: Use it if you want to make your help text very clear to the user.
  • Help text inside a popover triggered from a help icon next to the title: Use it when you only want to provide help text if the user requires help. Placeholder text is not recommended since users can misinterpret it as final text. If you must use a placeholder, do not write help text in it. Just provide a text example.

States

Default

Text fields can be simple:

default empty state

Although they can include placeholder text, we don't recommend it since users can misinterpret it as final content.

default empty state

Text fields can also have help text placed right below the text field.

default empty state

Active

default active state

Disabled

default disabled state

Read only

default disabled state

Validations

Validation text for a field is placed right below the field box, just before the help text. This places the error right next to the offending field, so there is no confusion for the user as to what field failed validation.

Success

default success state

Warning

default warning state

Error

default error state

default error state

Attributes

input field parts

A text field, at the very least, contains these elements:

  1. Label
  2. Text field box
  3. Placeholder
  4. Status message
  5. Help text

input field metrics without errorinput field metrics with error

Text area

A text area is similar to a text field input, however, it supports several lines of text. For example, a user can use a text area to enter long product descriptions.

text area

text area

Usage

  • A text area's height can be resized by the user, allowing them to see more or less text as they please.
  • A text area has the same states and validation states as a text field.
  • Text areas can have help text. Lexicon provides two different mechanisms to provide help:
    • Help text below the field: Use it if you want to make your help text very clear to the user.
    • Help text inside a popover triggered from a help icon next to the title: Use it when you only want to provide help text if the user requires help.
  • Placeholder text is not recommended since users can misinterpret it as final text. If you must use a placeholder, do not write help text in it. Just provide a text example.
  • A text area can be configured to expand on input change.
    • It requires a min-height of 44px like a text field.
    • The text area has a mid-height value set to 88px, equivalent to three lines of text.
    • The text area has a max-height value set to 200px. From mid-height to max-height, the text area will grow in height. When it reaches the maximum, the text area stops growing and the vertical scroll bar becomes available.
    • We recommend that you configure the min-height with the same value as the mid-height, since three lines is the recommendation for the text size.

Except as otherwise noted, the content of this site is licensed under CC BY-SA 4.0 license.