Components

Input

A styled TextInput primitive with focus ring, variants, and accessible props for form interactions.

Start typing to test the field state.

Installation

Install the registry item directly, then add any package dependencies if you are setting the component up manually.

Run the registry command below to add input to your project.

watermelon add input

If you are wiring the component manually, install the package dependencies shown below.

npm install class-variance-authority

Import Input from your local UI registry output.

Import

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

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

The Input component wraps React Native's TextInput with NativeWind v4 styles and a variant API for visual modes.

A standard text input with placeholder and focus ring.

Use the ghost variant for borderless inputs on coloured backgrounds.

Pass editable={false} to disable the input.

Use secureTextEntry for password inputs.

Input extends all props from React Native TextInput and adds design-system variants.

prop	type	default	description
variant	"default" \| "ghost"	"default"	Controls the visual style of the input.
placeholder	string	-	Placeholder text shown when the input is empty.
editable	boolean	true	When false, disables the input and lowers opacity.
secureTextEntry	boolean	false	Masks the text for password fields.
className	string	-	Extends the NativeWind classes applied to the input.