Skip to Content
ComponentsInput

Input

The Input component is a text input field with support for labels, icons, validation, and different input types.

Input

Basic Usage

<Input
  placeholder="Enter your name"
  value={name}
  onChangeText={setName}
/>

With Icon

import { IconUser } from "@tabler/icons-react-native";
 
<Input
  placeholder="Username"
  value={username}
  onChangeText={setUsername}
  leftIcon={<IconUser size={20} color={Colors.darkGray} />}
/>

Import

import Input from "../components/Input";

Props

  • placeholder (string): Placeholder text.
  • value (string): Current input value.
  • onChangeText (function, Required): Text change handler.
  • label (string): Optional label above input.
  • leftIcon (React.Component): Optional left icon.
  • error (string): Error message to display.
  • secureTextEntry (boolean, default: false): Hide text for passwords.
  • keyboardType (string, default: “default”): Keyboard type.
  • multiline (boolean, default: false): Multi-line input.
  • numberOfLines (number, default: 1): Number of lines for multiline input.
  • editable (boolean, default: true): Whether input is editable.
ImageCardProfileCard