Input
The Input component is a React Native text field with semantic boolean props (error, small, large, disabled), plus prefix/suffix addons, overlaid icons (leadingIcon / trailingIcon with any Canvas glyph as icon), a passwordToggle eye for a secureTextEntry value, and a clearable clear button. Input is single-line; for multi-line entry use the dedicated Textarea.
Pass label (and required) to name the field: iOS and web render the label above the control, while Android floats the Material 3 in-container label. On Android the field grows with the user's text size so the floated label never meets the value, and a label longer than the field truncates on one line inside it while the field's accessible name stays the whole label. The required star is decorative: a screen reader hears the field as required, from aria-required on the web and from its name ("Full name, required") on iOS and Android. A field fills the parent it is given; a step of its own (xs, lg, …, with start to pin it to the leading edge) or a Container step sets its measure. Select and the search field share its look, and Field and Form compose that label with helper and error text. On iOS the field is drawn to the iOS input-field reference: a white box with a hairline, a muted title above, a glyph that tints with focus and error, and in solid mode an error wash. Under glass a wash would cost the field's ink its contrast over the material, so the iOS field takes none (the web's field a trace in dark only), and the error border, the tinted glyph and a Field's message carry the state.
Inside an overlay, Escape follows the overlay's cancellation policy. A supplied onKeyPress runs first and can call preventDefault() to handle Escape locally. Cancelling an IME candidate keeps the overlay open.
iOS
Android
Web
tsx
Default
Label
Required
Prefix
Action
Icon
Email
Password
Username
Date of birth
Currency
Search
Card number
Error
Disabled
Read only
Measure
Props
Do & Don’t
text
Don’t
A placeholder is not a label; it vanishes the moment the user types and screen readers may skip it.
Do
Email
Pass label so every field carries a persistent, programmatically-linked name.
number
Don’t
A plain text field lets users type the unit into the value, breaking parsing and validation.
Do
Storage
Park the unit in a suffix addon so the value stays purely numeric.
Read only or disabled
Don’t
Disable a field whose value people must read or copy. disabled takes it out of the tab order and announces it as unavailable on every platform.
Do
Workspace ID
Pass readOnly for a value people still need to reach. On the web it stays in the tab order and its text stays selectable. On iOS and Android, React Native maps a read-only field to a disabled native view, so VoiceOver and TalkBack announce it as dimmed and Android cannot select its text.