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

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.

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 { TextInput } from "react-native";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/lib/utils";

const inputVariants = cva(
  "rounded-md border 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;
}
export function Input({ variant, size, className, ...props }: InputProps) {
  return (
    <TextInput
      className={cn(inputVariants({ variant, size }), className)}
      placeholderTextColor="hsl(240 3.8% 46.1%)"
      {...props}
    />
  );
}

Previous← Infinite List NextInput Group →