How to have a label and a placeholder on a textinput at the same time

[amanpuranik]

Ask your Question

If you have both a label and a placeholder prop at the same time, then on initial render, the label will show but then the placeholder doesnt show until the input is focused like so:

https://github.com/callstack/react-native-paper/assets/56619430/7a23d59d-b705-461f-ab4a-43636b12b904

is there a way to have both the label and the placeholder exist at the same time even when the input isnt focused. in other words, is there a way to make the text input always look like this with the label at the top?

[hbriese]

I'd also like this behaviour, unfortunately TextInput only shows the placeholder when focussed or there's no label.

The M3 spec doesn't mention placeholders at all, however the M3 figma library always displays the placeholder, though there's no way to focus a field on figma so who knows the exact intended behaviour.

Something like a placeholderAlwaysVisible prop that shows the placeholder (when there is one) regardless of focus would allow people to opt into this behaviour