Input

Text input with variants and states.

Web preview — components render natively on iOS & Android

import { Input } from "@/components/ui/input";

export function MyScreen() {
  return (
    <Input placeholder="Enter your email..." />
  );
}

Installation#

npx @aniui/cli add input

Usage#

app/index.tsx

import { Input } from "@/components/ui/input";

export function MyScreen() {
  return (
    <Input placeholder="Enter your email..." />
  );
}

Password Toggle#

Show/hide password with a trailing eye icon.

Web preview — components render natively on iOS & Android

import { Input } from "@/components/ui/input";
import { Pressable } from "react-native";
import { Ionicons } from "@expo/vector-icons";

const [visible, setVisible] = useState(false);

<Input
  secureTextEntry={!visible}
  trailingIcon={
    <Pressable onPress={() => setVisible(!visible)}>
      <Ionicons name={visible ? "eye-off" : "eye"} size={18} color="#71717a" />
    </Pressable>
  }
  placeholder="Password"
/>

Clear Button#

Add a pressable clear icon to reset the input value.

Web preview — components render natively on iOS & Android

import { Input } from "@/components/ui/input";
import { Pressable, Text } from "react-native";

<Input
  trailingIcon={
    <Pressable onPress={() => setValue("")}>
      <Ionicons name="close-circle" size={18} color="#71717a" />
    </Pressable>
  }
  placeholder="Type something..."
  value={value}
/>

Leading Icon#

Add an icon before the input text.

Web preview — components render natively on iOS & Android

import { Input } from "@/components/ui/input";
import { Ionicons } from "@expo/vector-icons";

<Input
  leadingIcon={<Ionicons name="search" size={18} color="#71717a" />}
  placeholder="Search..."
/>

Variants#

Web preview — components render natively on iOS & Android

<Input variant="default" placeholder="Default input" />
<Input variant="ghost" placeholder="Ghost input" />

Sizes#

Web preview — components render natively on iOS & Android

<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />

The ref is forwarded to the underlying React Native TextInput, so you can call focus(), blur(), and clear() imperatively. Same applies to Textarea, PasswordInput, SearchBar, MaskedInput, PhoneInput, and NumberInput.

app/index.tsx

import { useRef } from "react";
import { TextInput } from "react-native";
import { Input } from "@/components/ui/input";

export function MyScreen() {
  const inputRef = useRef<TextInput>(null);

  return (
    <Input
      ref={inputRef}
      placeholder="Enter your email..."
      onSubmitEditing={() => inputRef.current?.blur()}
    />
  );
}

// Anywhere — e.g. after a button press:
//   inputRef.current?.focus();
//   inputRef.current?.blur();
//   inputRef.current?.clear();

Props#

PropTypeDefault

variant

"default" | "ghost"

"default"

size

"sm" | "md" | "lg"

"md"

leadingIcon

React.ReactNode

—

trailingIcon

React.ReactNode

—

className

string

—

Also accepts all TextInput props from React Native, and forwards ref to the underlying TextInput.

Accessibility#

accessibilityRole is set on the underlying TextInput.
Placeholder text color uses the theme variable for consistent contrast.

Source#

components/ui/input.tsx

import React from "react";
import { View, TextInput, useColorScheme } from "react-native";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const inputVariants = cva(
  "rounded-md border py-2 text-foreground placeholder:text-muted-foreground",
  {
    variants: {
      variant: {
        default: "border-input bg-background",
        ghost: "border-transparent bg-transparent",
      },
      size: {
        sm: "min-h-9 px-3 text-sm",
        md: "min-h-12 px-4 text-base",
        lg: "min-h-14 px-5 text-lg",
      },
    },
    defaultVariants: { variant: "default", size: "md" },
  }
);

export interface InputProps
  extends React.ComponentPropsWithoutRef<typeof TextInput>,
    VariantProps<typeof inputVariants> {
  className?: string;
  leadingIcon?: React.ReactNode;
  trailingIcon?: React.ReactNode;
}

export const Input = React.forwardRef<
  React.ElementRef<typeof TextInput>,
  InputProps
>(function Input(
  { variant, size, className, leadingIcon, trailingIcon, ...props },
  ref
) {
  const hasIcons = !!(leadingIcon || trailingIcon);
  const dark = useColorScheme() === "dark";
  const caret = dark ? "#fafafa" : "#18181b";

  if (!hasIcons) {
    return (
      <TextInput
        ref={ref}
        className={cn(inputVariants({ variant, size }), className)}
        placeholderTextColor={dark ? "#a1a1aa" : "#71717a"}
        keyboardAppearance={dark ? "dark" : "light"}
        selectionColor={caret}
        cursorColor={caret}
        {...props}
      />
    );
  }

  return (
    <View
      className={cn("flex-row items-center", inputVariants({ variant, size }), className)}
    >
      {leadingIcon && <View className="me-2">{leadingIcon}</View>}
      <TextInput
        ref={ref}
        className="flex-1 text-foreground p-0 text-base"
        placeholderTextColor={dark ? "#a1a1aa" : "#71717a"}
        keyboardAppearance={dark ? "dark" : "light"}
        selectionColor={caret}
        cursorColor={caret}
        {...props}
      />
      {trailingIcon && <View className="ms-2">{trailingIcon}</View>}
    </View>
  );
});

Previous← Infinite List NextInput Group →