This is beta documentation for Stream Chat React Native SDK v9. For the latest stable version, see the latest version (v8) .

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.

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.

`variant` (required)

The visual variant of the input container.

Type	Values
string	`'outline'` \| `'ghost'`

Variant	Description
`outline`	Input with a visible border
`ghost`	Input with no border or background

`title`

Label text displayed above the input.

Type
string

`description`

Descriptive text displayed below the title and above the input field.

Type
string

`LeadingIcon`

A render function for the icon displayed on the leading side (left in LTR, right in RTL) of the input.

Type
`(props: IconProps) => ReactNode`

`TrailingIcon`

A render function for the icon displayed on the trailing side (right in LTR, left in RTL) of the input.

Type
`(props: IconProps) => ReactNode`

`state`

The current validation state of the input. Controls the visual styling and which helper message is displayed.

Type	Default	Values
string	`'default'`	`'default'` \| `'error'` \| `'success'`

`helperText`

Whether to show the helper text area below the input. When false, the error/success/info messages are hidden.

Type	Default
boolean	`true`

`errorMessage`

Message displayed below the input when state is 'error'.

Type
string

`successMessage`

Message displayed below the input when state is 'success'.

Type
string

`infoText`

Message displayed below the input when state is 'default'.

Type
string

`editable`

Whether the input is editable.

Type	Default
boolean	`true`

`containerStyle`

Additional style applied to the outermost container View wrapping the title, input, and helper text.

Type
`StyleProp<ViewStyle>`

GiphyChip

VideoPlayIndicator