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

# Input

## Overview

`Input` is a React Native component for creating text input fields with customizable styles and behaviors.
It's built on top of React Native's [TextInput](https://reactnative.dev/docs/textinput). This component
provides properties for label display and customization.

## Preview

<Tabs>
  <Tab title="Preview">
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <div style={{ marginRight: '40px' }}>
        <img src="https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/input-light.png" />

        <p>Light mode</p>
      </div>

      <div style={{ marginRight: '40px' }}>
        <img src="https://raw.githubusercontent.com/Mobilecn-UI/nativecn-ui/main/assets/examples/components/input-dark.png" />

        <p>Dark mode</p>
      </div>
    </div>
  </Tab>

  <Tab title="Code">
    ```jsx theme={null}
    <Input placeholder="Email" />
    ```
  </Tab>
</Tabs>

## Installation

<Tabs>
  <Tab title="CLI">
    ```bash theme={null}
    npx nativecn-ui add Input 
    ```
  </Tab>

  <Tab title="Manual">
    <Steps>
      <Step title="First Step">
        Include [Input.tsx](https://github.com/Mobilecn-UI/nativecn-ui/blob/main/components/Input.tsx) in your project.
      </Step>

      <Step title="Second Step">
        Update the import paths to match your project setup.
      </Step>
    </Steps>
  </Tab>
</Tabs>

## Properties

* `className?: string (optional)` - The classes for the `View` container wrapping the input field and the label.
* `label?: string` (optional) - The label text for the input field.
* `inputClasses?: string` (optional) - Custom classes for styling the input field.
* `labelClasses?: string` (optional) - Custom classes for styling the label.
* See React Native's [TextInput props](https://reactnative.dev/docs/textinput#props)

## Usage

### Basic usage with `label`

```jsx theme={null}
<Input label="Email" placeholder="Enter your email" />
```

### Usage with keyboard type and custom styles

```jsx theme={null}
<Input
  label="Phone Number"
  keyboardType="phone-pad"
  placeholder="123-456-7890"
  className="flex flex-row items-center gap-2"
  inputClasses="border-2 border-blue-500"
  labelClasses="text-lg text-blue-600"
/>
```

### Controlled Component

```jsx theme={null}
const [inputValue, setInputValue] = useState('');
// ...
<Input
  value={inputValue}
  onChange={setInputValue}
  placeholder="Controlled Input"
/>;
```