> ## Documentation Index
> Fetch the complete documentation index at: https://docs.uniwind.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# TextInput

> Learn how to use TextInput with Uniwind className props

## 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

<Info>
  **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"`).
</Info>

<Warning>
  **Since 1.6.2:** Passing a className without the `accent-` prefix to a color prop will log a warning to the development console.
</Warning>

## Uniwind Bindings

<ParamField path="className" type="string">
  Maps to the `style` prop. Use any Tailwind utility classes.
</ParamField>

<ParamField path="cursorColorClassName" type="string">
  Maps to the `cursorColor` prop. Requires `accent-` prefix for color values.
</ParamField>

<ParamField path="selectionColorClassName" type="string">
  Maps to the `selectionColor` prop. Requires `accent-` prefix for color values.
</ParamField>

<ParamField path="placeholderTextColorClassName" type="string">
  Maps to the `placeholderTextColor` prop. Requires `accent-` prefix for color values.
</ParamField>

<ParamField path="selectionHandleColorClassName" type="string">
  Maps to the `selectionHandleColor` prop. Requires `accent-` prefix for color values.
</ParamField>

<ParamField path="underlineColorAndroidClassName" type="string">
  Maps to the `underlineColorAndroid` prop (Android only). Requires `accent-` prefix for color values.
</ParamField>

## Usage Example

```tsx theme={null}
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>
```