# 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

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

---

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/).