placeholder

Learn placeholder and keyboardType.

placeholder

placeholder is the hint text that TextInput shows to the user when the field is empty. It is added with placeholder="Your name". When the user starts typing, the hint disappears.

It should not be confused with the real value value; placeholder only shows when empty and is never written to state. Keep hints short and clear: "Email", "Phone", "Full name". Do not put long descriptions in the placeholder; use a separate Text component for user assistance.

placeholderTextColor

By default placeholder appears in a faint gray. To change its color use the placeholderTextColor prop: <TextInput placeholder="Your name" placeholderTextColor="tomato" />.

This is useful when your design needs to highlight the hint or separate it from the background. The value can be a color name (gray, tomato) or a hex code (#999). Once the user starts typing, value is shown with the default text color.

Exercise TextInput with placeholder

Import TextInput from react-native. Add a <TextInput> with the placeholder prop set to "Username" and the placeholderTextColor prop set to "gray".

Show example solution

import { TextInput, View } from "react-native";

function App() {
  return (
    <View>
      <TextInput placeholder="Username" placeholderTextColor="gray" />
    </View>
  );
}

Test yourself

Writing placeholder

<TextInput ____="Email" />

Show answer

<TextInput placeholder="Email" />

What does placeholder do?
```
<TextInput placeholder="Email" />
```
- Holds the real value
- Shows a hint when empty
- Opens the keyboard
- Sets the text color
Show answer

Shows a hint when empty — placeholder shows a short hint when the field is empty.
Match the placeholder features

placeholder

Hint when empty
placeholderTextColor

Hint color
value

Real value
When user types

Hint disappears

Next lesson: Secure text

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies