Skip to main content

​
Overview

The TextInput component allows users to enter text. Uniwind provides className prop support for styling this component with various color customization options.

​
Styling Convention

For style props: Use regular Tailwind classes directly (e.g., className="p-4").For non-style props (like color): Use the accent- prefix (e.g., colorClassName="accent-blue-500").

​
Uniwind Bindings

​
className
string
Maps to the style prop. Use any Tailwind utility classes.
​
cursorColorClassName
string
Maps to the cursorColor prop. Requires accent- prefix for color values.
​
selectionColorClassName
string
Maps to the selectionColor prop. Requires accent- prefix for color values.
​
placeholderTextColorClassName
string
Maps to the placeholderTextColor prop. Requires accent- prefix for color values.
​
selectionHandleColorClassName
string
Maps to the selectionHandleColor prop. Requires accent- prefix for color values.
​
underlineColorAndroidClassName
string
Maps to the underlineColorAndroid prop (Android only). Requires accent- prefix for color values.

​
Usage Example

import { TextInput, View } from 'react-native'

<View className="p-4">
  <TextInput
    placeholder="Enter text..."
    className="border border-gray-300 rounded-lg p-3 text-base"
    cursorColorClassName="accent-blue-500"
    selectionColorClassName="accent-blue-200"
    placeholderTextColorClassName="accent-gray-400 dark:accent-gray-500"
    underlineColorAndroidClassName="accent-transparent"
  />
</View>