Your bookmarks

InputField

Also known as textbox

Offers users a simple input for a form.

Forms require input from users. When you only need basic information, use input fields to gather exactly what you need.

Input fields accept several types of data and can impose various restrictions to ensure you get what you need from users. And help and error guidance to ensure they know what to enter.

Component status

Figma
Released
Web (React)
Released
iOS (Swift)
n/a
Android (Kotlin)
n/a
Sketch
Released

Content structure

Mobile

Label: provides a clear description of what users should fill in; placeholder: provides additional help for expected values; prefix: optionally adds icon or text context for expected values.

Desktop

Label: provides a clear description of what users should fill in; placeholder: provides additional help for expected values; prefix: optionally adds icon or text context for expected values; suffix: optionally improves clarity (text adds context and ButtonLink is actionable).