TextInput

Atom

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.

src/atoms/text-input

View in Inputs

Playground

Every control sets a real prop of TextInputProps. The JSX below updates as you go.

Web

iOS

Android

Props

placeholder

string

value

string

multiline

boolean

JSX · TextInputProps

<TextInput placeholder="Type here" />

Variants

3 examples from src/atoms/text-input/text-input.md, each rendered live from its own JSX.

Placeholder

<TextInput placeholder="Search components..." />

Multiline

<TextInput accessibilityLabel="Notes" multiline defaultValue={"Multi-line text\nwraps and grows as you type."} />

Disabled

<TextInput accessibilityLabel="Plan" defaultValue="Pro" editable={false} aria-disabled />

States

Hover, focus and press are pinned so they can be compared side by side; the rest are real props.

default

focus

Anatomy

1

Native input

2

Placeholder

Dimmed parts appear only in some states or variants.

Props

A React Native primitive, re-exported as is.

Accepts every React Native TextInput prop unchanged. Canvas re-exports it so every component is built from the same primitive.

Accessibility and keyboard

Keyboard

Type

Edits the value

Tab

Next field

Escape

Clears when clearable

Semantics

No role of its own in source; it reads as the content it renders.

From the docs

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.

Platform skins

The playground's props on each platform: same tree, native shapes, type and touch sizes.

Web

control 10 · field 10 · card 16 · Instrument Sans

iOS

capsule controls · field 8 · card 12 · SF Pro · 44 pt