Text inputs are individual elements that can be combined together to create form experiences on NBUX.

# Component

# Text Input

Text input types

# States

Input states

# Text Area

Text areas should be used for longer amounts of information where multiple lines might be needed.

Text area

# Rules

Do

  • On touch devices, support specific keyboards for specific input types e.g. numerical keyboards for inputs that require numbers
  • Fix width on inputs based on the information required. This helps the user understand what they need to enter
  • Labels should be clear and succinct, and always be positioned above the input field

Don't

  • Text labels should not take up multiple lines. Keep them brief, clear and fully visible
  • Avoid designing long forms. If you can't avoid this, separate your forms into different pages or sections on the same page.

# Structure

Input specifications

# Specifications

Min height Padding(x) Padding(y) Gutters
56pt 16pt 16pt 16pt

# Typography

Label type Font size Line height Font weight
Label text 16pt 24pt Regular
Helper text 12pt 20pt Regular
Error text 12pt 20pt Bold
Last Updated: 10/6/2020, 8:34:39 AM