Input

Installation

Input ships with the library — install it once, then import:

import { Input } from "@delacour/react-native-ui/input";

Or copy the source into your project, to own and edit it:

bunx delacour@latest add input

Usage

app/index.tsx

import { Input } from "@/components/ui/input";
import { useState } from "react";
import { View } from "react-native";

export default function Example() {
  const [email, setEmail] = useState("");

  return (
    <View className="flex-1 justify-center p-4">
      <Input value={email} onChangeText={setEmail} placeholder="you@example.com" />
    </View>
  );
}

Variants

Use the variant prop to change how the box is painted.

At rest

<Input variant="primary" />
<Input variant="secondary" />

Sizes

One axis drives the box height, the value's type scale and a decorator's icon step.

<Input size="sm" />
<Input size="md" />
<Input size="lg" />

Groups

Use Input.Group to put a prefix or a suffix inside the field's own border.

Controls

<Input.Group>
  <Input.Group.Prefix>$</Input.Group.Prefix>
  <Input value={amount} onChangeText={setAmount} keyboardType="decimal-pad" />
  <Input.Group.Suffix>NZD</Input.Group.Suffix>
</Input.Group>

variant, size, isInvalid and isDisabled live on the group, and an Input inside one reads them from context. Pressing anywhere on the group focuses the field; a Button inside a decorator still receives its own press.

States

The two state axes resolve Input.Group → the Input's own prop → the enclosing Field, and both are ?? chains, so an explicit false is a value rather than an absence.

Live validation

<Input isInvalid />
<Input isDisabled />

Placeholder, caret and selection colours

These take a colour value, not a style, so they are named as classes and resolved rather than applied.

<Input
  placeholderColorClassName="accent-muted-foreground"
  selectionColorClassName="accent-info"
/>

They must be accent-* utilities

accent-muted-foreground, never text-muted-foreground. Uniwind reads only accentColor off the compiled class, so anything else resolves to nothing: it warns once in development and leaves the prop undefined, which renders as the platform default rather than as an error.

API Reference

Extends React Native's TextInputProps. placeholderTextColorClassName is withheld in favour of placeholderColorClassName, which is the name the rest of the library uses.

Prop

Type

Input.Group

Puts a prefix or a suffix inside the input's own border, and publishes the shared axes so the input inside does not restate them.

Prop

Type

Input.Group.Prefix / Input.Group.Suffix

Content drawn inside the group's border, before or after the field. An Icon inside one inherits the input's icon size and a muted foreground.

Prop

Type

Input

On this page