Input

Input is a theme-aware text input component with support for titles, descriptions, helper text, validation states, and leading/trailing icons. It extends React Native's TextInput with additional UI chrome for building form-like interfaces.

:::note This base-UI Input is a standalone text-field primitive. It is distinct from the Input override key in the ComponentsContext, which refers to the message composer's input body (the editable area of the message composer) and is not this component. When customizing the message composer, override that context key rather than this primitive. :::

The component automatically handles focus/blur styling, RTL icon swapping, and state-based visual feedback (error, success, default).

Usage

import { Input } from "stream-chat-react-native";

<Input
  variant="outline"
  title="Channel Name"
  description="Enter a name for your channel"
  placeholder="e.g. General"
  state="default"
/>;

With validation states:

<Input
  variant="outline"
  title="Email"
  state="error"
  errorMessage="Please enter a valid email address"
  value={email}
  onChangeText={setEmail}
/>

With icons:

<Input
  variant="outline"
  LeadingIcon={(props) => <SearchIcon {...props} />}
  TrailingIcon={(props) => <ClearIcon {...props} />}
  placeholder="Search..."
/>

Props

Input extends TextInputProps from React Native, so all standard text input props (like value, onChangeText, placeholder, keyboardType, etc.) are supported.