Pilot

RN-universal Input pilot

Scaffolded

shadcn Input on the left (HTML input element) and the React Native Input on the right (TextInput via RN Web). Both are controlled, both honour disabled + invalid states, both emit the same DOM on the web target while the RN source file is ready to bundle for native in Phase 7.

Side-by-side: default, filled, disabled, invalid

State
shadcn (DOM input)
RN (TextInput via RN Web)
Empty
Controlled
Disabled
Invalid
Password
Numeric

Prop-name mapping

Concernshadcn / DOMRN
Value changeonChange(e) → e.target.valueonChangeText(text)
Disableddisablededitable={!disabled}
Invalidaria-invalidinvalid prop (→ accessibilityState.invalid on native)
Passwordtype="password"secureTextEntry
Numeric keyboardtype="number" / inputmodekeyboardType="numeric"
Auto-capitalizeautocapitalize attributeautoCapitalize prop (RN canonical names)
Focusautofocus / ref.focus()autoFocus / ref.focus()

What this pilot proves

  • RN TextInput renders and accepts keyboard input on the web via RN Web.
  • Controlled value flow works identically — RN's onChangeText replaces onChange(e.target.value).
  • Focus ring, placeholder colour, disabled opacity, and invalid border all read from the shared token bridge (no hardcoded colours).
  • Native platform prop names (secureTextEntry, keyboardType, autoCapitalize) survive the web render via RN Web's translations.