Components
Input
A styled TextInput primitive with focus ring, variants, and accessible props for form interactions.
Installation
Install the registry item directly, then add any package dependencies if you are setting the component up manually.
Install the component
Run the registry command below to add input to your project.
watermelon add inputInstall manual dependencies
If you are wiring the component manually, install the package dependencies shown below.
npm install class-variance-authorityImport the component
Import Input from your local UI registry output.
Import
import { Input } from "@/components/ui/input";Import
Import
import { Input } from "@/components/ui/input";Usage
The Input component wraps React Native's TextInput with a small variant
API for visual modes, slots, validation, and focus styling.
Basic Usage
A standard text input with placeholder and focus ring.
Ghost Variant
Use the ghost variant for borderless inputs on coloured backgrounds.
Disabled
Pass editable={false} to disable the input.
Secure Entry
Use secureTextEntry for password inputs.
API Reference
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. |
| size | "default" | "sm" | "lg" | "default" | Adjusts the control height and text sizing. |
| secureTextEntry | boolean | false | Masks the text for password fields. |
| invalid | boolean | - | Applies the destructive border and selection styling. |