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

Light mode

Dark mode

Code

<Input placeholder="Email" />

Installation

CLI

npx nativecn-ui add Input 

Manual

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"
/>;