# rn-search-input
URL: /docs/native/docyrus/search-input

Search input with debounce and clear button, supporting manual and automatic search modes, three visual variants and TextInput passthrough.

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/rn-search-input
```

## Usage

```tsx
import { SearchInput } from '@/components/docyrus-native/search-input';

const [query, setQuery] = useState('');

<SearchInput
  value={query}
  onValueChange={setQuery}
  onSearch={(value) => fetchResults(value)}
/>
```

### Manual Mode

In manual mode, `onSearch` fires only when the user submits (return key) or presses the search icon.

```tsx

```

### Variants

```tsx

```

### Sizes

```tsx

```

`size="md"` is kept as a native alias of `'default'`.

### Ref & TextInput props

```tsx
const inputRef = useRef<TextInput>(null);

inputRef.current?.focus();
```

## Translations

Copy comes from `useUiTranslation()` with the same keys as web — mount a `UiTranslationProvider` to translate:

| Key | English fallback |
|-----|------------------|
| `ui.common.searchPlaceholder` | `Search...` (placeholder, when `placeholder` is not set) |
| `ui.common.search` | `Search` (search icon accessibility label) |
| `ui.common.clearSearch` | `Clear search` (clear button accessibility label) |

## API Reference

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `value` | `string` | — | The current input value (controlled). |
| `onValueChange` | `(value: string) => void` | — | Called on every keystroke to update the controlled value. |
| `onSearch` | `(value: string) => void` | — | Called when a search should run: after the debounce delay (`debounce` mode), or on submit / search-icon press (`manual` mode). Also called with `''` on clear. |
| `mode` | `'debounce' \| 'manual'` | `'debounce'` | Search trigger mode. |
| `debounceMs` | `number` | `300` | Debounce delay in milliseconds (debounce mode only). |
| `variant` | `'default' \| 'outline' \| 'ghost'` | `'default'` | Visual style: input border, border colour, or borderless/transparent. |
| `size` | `'sm' \| 'default' \| 'md' \| 'lg'` | `'default'` | Height, font size and padding. `'md'` is an alias of `'default'`. |
| `placeholder` | `string` | `'Search...'` | Placeholder text (translated via `ui.common.searchPlaceholder` when omitted). |
| `disabled` | `boolean` | `false` | Non-editable and visually dimmed. |
| `autoFocus` | `boolean` | `false` | Focus the input on mount. |
| `ref` | `Ref<TextInput>` | — | Ref to the underlying `TextInput` (React 19 ref-as-prop). |
| `className` | `string` | — | Additional classes for the container. |
| `inputClassName` | `string` | — | Additional classes for the `TextInput`. |
| `...TextInputProps` | `TextInputProps` | — | Every other `TextInput` prop (`returnKeyType`, `onSubmitEditing`, `onFocus`, `onBlur`, `keyboardType`, `testID`, …) is forwarded. `onSubmitEditing` / `onFocus` / `onBlur` are chained with the internal handlers. |

## Exports

| Export | Description |
|--------|-------------|
| `SearchInput` | The search input component |
| `searchInputVariants` | `tv()` slot definition (`base` / `text` / `icon` …) with `variant` + control sizes |

## Type Exports

| Type | Description |
|------|-------------|
| `SearchInputProps` | Props for the SearchInput component. |
| `SearchInputVariant` | `'default' \| 'outline' \| 'ghost'`. |
| `SearchInputSize` | `'sm' \| 'default' \| 'md' \| 'lg'`. |
| `SearchInputMode` | `'debounce' \| 'manual'`. |