# 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

```tsx
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:

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

With icons:

```tsx
<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.

| Prop                 | Description                                                                                                                            | Type                                    |
| -------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------- |
| `variant` (required) | The visual variant of the input container. `'outline'`: input with a visible border, `'ghost'`: input with no border or background.    | `'outline'` \| `'ghost'`                |
| `title`              | Label text displayed above the input.                                                                                                  | `string`                                |
| `description`        | Descriptive text displayed below the title and above the input field.                                                                  | `string`                                |
| `LeadingIcon`        | A render function for the icon displayed on the leading side (left in LTR, right in RTL) of the input.                                 | `(props: IconProps) => ReactNode`       |
| `TrailingIcon`       | A render function for the icon displayed on the trailing side (right in LTR, left in RTL) of the input.                                | `(props: IconProps) => ReactNode`       |
| `state`              | The current validation state of the input. Controls the visual styling and which helper message is displayed. Defaults to `'default'`. | `'default'` \| `'error'` \| `'success'` |
| `helperText`         | Whether to show the helper text area below the input. When `false`, the error/success/info messages are hidden. Defaults to `true`.    | `boolean`                               |
| `errorMessage`       | Message displayed below the input when `state` is `'error'`.                                                                           | `string`                                |
| `successMessage`     | Message displayed below the input when `state` is `'success'`.                                                                         | `string`                                |
| `infoText`           | Message displayed below the input when `state` is `'default'`.                                                                         | `string`                                |
| `editable`           | Whether the input is editable. Defaults to `true`.                                                                                     | `boolean`                               |
| `containerStyle`     | Additional style applied to the outermost container `View` wrapping the title, input, and helper text.                                 | `StyleProp<ViewStyle>`                  |


---

This page was last updated at 2026-04-17T17:33:46.655Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/input/](https://getstream.io/chat/docs/sdk/react-native/ui-components/base-ui/input/).