# Text field

> A text field is the control in which people type a single line of text, such as an email, a name or a search term. iOS calls it a Text Field, and Material 3 draws it as a Filled or Outlined Text Field.

Page: https://www.appetiteui.com/glossary/text-field. Text field design: iOS Text Field vs Material 3. Also called Input field, Form field, Text input.

## Why it matters

Typing is the slowest thing a person does on a phone, so a text field decides whether a form gets finished. Its label, its keyboard and the moment it reports an error matter more than its fill.

A placeholder disappears when typing starts, which is why Apple asks for a separate label when the field’s purpose must stay visible.

## iOS and Android

|  | iOS | Android (Material 3) | Appetite UI |
| --- | --- | --- | --- |
| Name | Text Field and Secure Field | Text field, Filled or Outlined | Input |
| Stroke, Outlined (Material Components) | A 402 by 52 row in the file | 1 dp, 2 dp when focused | See below |
| Icon minimum size (Material Components) | 44 pt touch target | 48 dp | See below |

| Component | iOS | Material 3 | What differs |
| --- | --- | --- | --- |
| Text field | iOS / Text Field | M3 / Text Field, Filled or Outlined, 56 high | Material has Enabled, Focused, Error and Disabled states |

## In Appetite UI

Input is one component with the types Default, Left and Right Selection, Password, Prefix and Suffix, and the states Placeholder, Filled, Focused, Error and Disabled. Label, hint and error never change the height of the field.

Digit Input, Stepper and Text Area exist as Appetite UI components only; the docs page marks them as having no counterpart on either platform.

## Example

A sign-up form stacks Email, Password and Name at one width. Email opens the email keyboard, Password is a secure field with a show switch, and the error “Enter a valid email” appears under the field once it loses focus, not on the first keystroke.

## Common mistakes

- Using the placeholder as the only label. It vanishes while typing; keep a label above the field.
- Validating on every keystroke. Check an email when the person moves on, and a digits-only field at the moment a wrong character is typed.
- Showing the default keyboard for every field. Choose the type that fits, such as email, number or URL.
- Letting the error message change the field’s height, so the layout jumps under the finger.

## Questions

### Should I use a placeholder or a label in a text field?

A label, with the placeholder as an extra hint at most. A placeholder disappears when people start typing, so Apple recommends a separate label that stays on screen.

### What is the difference between a filled and an outlined text field?

Both are Material 3 styles of one control. Filled draws the field on a tinted surface and outlined draws it with a stroke, 1 dp and 2 dp when focused in Material Components for Android. iOS has a single plain Text Field.

## Sources

1. [Apple Human Interface Guidelines: Text fields](https://developer.apple.com/design/human-interface-guidelines/text-fields)
2. [Material Design 3: Text fields](https://m3.material.io/components/text-fields/overview)
3. [Material Components for Android: Text field](https://github.com/material-components/material-components-android/blob/master/docs/components/TextField.md)

## Related

- Docs: [Input](https://www.appetiteui.com/docs/input)
- Docs: [Material 3](https://www.appetiteui.com/docs/material-3)
- Article: [iOS vs Material 3: what changes per component](https://www.appetiteui.com/blog/ios-vs-material-3-components)
- Glossary: [Touch target](https://www.appetiteui.com/glossary/touch-target)
- Glossary: [Search bar](https://www.appetiteui.com/glossary/search-bar)
- Glossary: [Checkbox and radio button](https://www.appetiteui.com/glossary/checkbox-radio-button)
- Glossary: [Form validation](https://www.appetiteui.com/glossary/form-validation)
- Glossary: [File upload](https://www.appetiteui.com/glossary/file-upload)