​
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

Light mode

Dark mode

​
Installation

npx nativecn-ui add Input

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