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. This component provides properties for label display and customization.

Preview

• Preview
• Code

Light mode

Dark mode

Light mode

Dark mode

<Input placeholder="Email" />

Installation

• CLI
• Manual

npx nativecn-ui add Input 

npx nativecn-ui add Input 

1

First Step

Include Input.tsx in your project.

2

Second Step

Update the import paths to match your project setup.

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

Usage

Basic usage with label

<Input label="Email" placeholder="Enter your email" />

Usage with keyboard type and custom styles

<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

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