TextInput
Single-line (or multiline) text entry. Control it with value + onChangeText, and style the box with the usual View style props. Common props: placeholder, secureTextEntry (passwords), keyboardType, and multiline.
iOS
Android
Web
tsx
Default
Placeholder
Multiline
Disabled
Do & Don’t
Labelled fields
Don’t
Let a bare TextInput's placeholder stand in for the label; it vanishes as soon as the user types, taking the field's only name with it.
Do
Email
Reach for Input for a form field: its label stays in view, names the field for assistive tech, and the field box is drawn for each platform.
Disabled
Don’t
Stop at editable={false}. On the web that is only read-only: the field stays a Tab stop and is announced as read-only, not unavailable.
Do
Pair editable={false} with aria-disabled. The browser then disables the field and takes it out of the tab order, and VoiceOver and TalkBack announce it as dimmed.
Focus ring
Don’t
Switch the outline off without painting a focus state of your own. A keyboard user then has no way to see which field takes their typing.
Do
Leave the focus ring to the primitive. It takes the theme's ring colour 2 px off the field, like every kit control. The browser draws a text field's ring on every focus, a click included, since the field takes typing however it was focused.