title: Input

Input

Text input wrapper with theme tokens.

Usage

import { TextInput } from "react-native";

<TextInput
  className="bg-card border border-border rounded-md p-4 text-foreground"
  placeholder="Email"
  placeholderTextColor="#9B9BA5"
  keyboardType="email-address"
  autoCapitalize="none"
/>

Focus state

NativeWind v4 supports focus: in className:

<TextInput className="border border-border focus:border-primary rounded-md p-4" />

With label

<View>
  <Text className="text-sm text-muted-foreground mb-2">Email</Text>
  <TextInput className="..." />
</View>