Input
Atom
The Input component is a React Native text field with semantic boolean props (error, small, large, compact, disabled), plus prefix/suffix addons, overlaid icons (leadingIcon / trailingIcon with any Canvas glyph as icon), a passwordToggle eye for a secureTextEntry value, a clearable clear button, and a shortcut keycap. Input is single-line; for multi-line entry use the dedicated Textarea.
Playground
Every control sets a real prop of InputProps. The JSX below updates as you go.
Web
iOS
Android
JSX · InputProps
Variants
17 examples from src/atoms/input/input.md, each rendered live from its own JSX.
Sizes
States
Hover, focus and press are pinned so they can be compared side by side; the rest are real props.
Anatomy
1
Label
2
Field
3
Leading icon
4
Value or placeholder
5
Trailing action
6
Helper or error
Dimmed parts appear only in some states or variants.
Props
47 props on InputProps, grouped as they are declared in source. Required props are marked *.
MeasureProps · width steps xxxs 192 · xxs 256 · xs 320 · sm 384 · md 448 · lg 512 · xl 576 · xxl 672 · xxxl 768 · wide 896 · wider 1024 · widest 1152 · page 1280, plus start to pin to the leading edge.
Accessibility and keyboard
Keyboard
Type
Edits the value
Tab
Next field
Escape
Clears when clearable
Semantics
Roles
button
States
selected
ARIA on web
aria-describedby
aria-hidden
aria-invalid
aria-label
aria-labelledby
aria-required
From the docs
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, requir
soft uses the brand’s entry-well fill where the skin provides it. systemFocus preserves the platform’s system focus outline. An explicit accessibilityLabel takes precedence over the visible label’s accessible name.
Pass search for the toolbar search: a magnifier, a borderless editor, and a uppercase prompt while empty on web. The prompt names the editor unless accessibilityLabel or label supplies its purpose. iOS draws its search field (a 36-point muted well) and Android the Material 3 search bar (a 56-dp muted stadium). systemFocus preserves the system focus outline for the borderless editor.
Platform skins
The playground's props on each platform: same tree, native shapes, type and touch sizes.
Usage
On the web the eye shows what pressing it does: the open eye while the value is masked, the struck-through eye once it is revealed. A field held focused by an InteractionOverride (a docs specimen) draws the web's 1.5px accent caret, blinking once a second, just after its value, since no real caret shows there.
shortcut shows a keyboard shortcut hint at the field's end, the key that focuses a search field: a compact flat keycap (<Kbd small flat>, the 22 px cap; tiny, the 20 px cap, on a small field) after the value and any inline suffix and before the trailing glyphs, 8 px from the field's end and 10 px from the value (8 on a small field). It takes the keys as Kbd's keys does: "⌘K" is one cap, "⌘ K" two. It is a hint only; bind the key yourself.
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 the native text field in Canvas's colors: a card-colored 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. A prefix or suffix addon's fill is held to the same bar: under glass it is only as dense as keeps its text at 4.5:1 over the field, so in the browser's light palettes and on the iOS field in dark it is a faint trace.
Tokens
Read from the playground render. Values follow the scheme and the ion hue.
--bg2
--fd
--ft
--ln2
--tx
--tx2