Input

Use a text input to collect single-line text data from users.

Status

Component checklist

Component (RN)

React Native Component Status

Published

Figma (RN)

Figma Component Status

Published

Code (Web)

HTML/CSS Code

Published

Figma (Web)

Figma Component Status

Published

Key points

  • Text inputs are used to collect user data in a single-line field
  • Input fields should always have a supporting label that is short, direct, and written in sentence case
  • Input fields are the same height as buttons and icon buttons
  • It is best practice to use the correct input type for the data you are trying to collect
  • Help users understand what they should enter by making text inputs the right size for the content they are intended for
  • Use this input type along with other form guidelines
  • Text inputs are based on browser defaults, but are themed to match the design system style

Use a text input to collect single-line text data from users.