> ## Documentation Index
> Fetch the complete documentation index at: https://docs.mobile-starter.amisi.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Input

> Capture text with a label, icons, accessories, and feedback

export const LocalUiPlayground = ({component, title, height = 640}) => {
  const [playgroundUrl, setPlaygroundUrl] = useState(null);
  useEffect(() => {
    const isLocal = window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1';
    setPlaygroundUrl(isLocal ? 'http://localhost:8090/' : 'https://selcouthdigital.github.io/amisi-mobile-starter/');
  }, []);
  if (!playgroundUrl) {
    return null;
  }
  return <div className="not-prose my-6 overflow-hidden rounded-xl border border-zinc-950/10 bg-white dark:border-white/10 dark:bg-zinc-950">
      <iframe src={`${playgroundUrl}?component=${component}`} title={title} className="block w-full" style={{
    height
  }} loading="lazy" />
    </div>;
};

`Input` wraps React Native `TextInput` with the current theme colors and shared field styling.

<LocalUiPlayground component="input" title="Interactive Input example" />

## Usage

```tsx theme={null}
import { useState } from 'react';

import { Input } from '@amisi-mobile-starter/ui';

export const SearchField = () => {
  const [query, setQuery] = useState('');

  return (
    <Input
      label="Search"
      iconName="search-outline"
      value={query}
      onChangeText={setQuery}
      helperText="Search by name or email."
    />
  );
};
```

## Props

| Prop             | Type                                            | Default     | Description                                               |
| ---------------- | ----------------------------------------------- | ----------- | --------------------------------------------------------- |
| `label`          | `string`                                        | `undefined` | Field label.                                              |
| `error`          | `string`                                        | `undefined` | Error shown instead of helper text.                       |
| `helperText`     | `string`                                        | `undefined` | Supporting text shown when there is no error.             |
| `iconName`       | `React.ComponentProps<typeof Ionicons>['name']` | `undefined` | Leading Ionicons glyph name.                              |
| `rightAccessory` | `ReactNode`                                     | `undefined` | Trailing content. It replaces the automatic clear button. |

All React Native `TextInputProps` are accepted. A non-empty string `value` or `defaultValue` shows a clear button when `onChangeText` exists and `rightAccessory` does not.