# SearchInput

A search text box with a magnifying-glass icon and clear button, firing an onsearch callback as the query changes.

**Category:** Components/Controls/SearchInput

**Import:** `import { SearchInput } from '@reuters-graphics/graphics-components'`

## Props

| Prop | Type | Default | Required | Description |
|------|------|---------|:--------:|-------------|
| `searchPlaceholder` | `string` | `'Search...'` |  | The placeholder text that appears in the search box. |
| `onsearch` | `(newValue: string) => void` | — |  | Optional function that runs when the input value changes. |

## Examples

### Demo

```svelte
<SearchInput onsearch={handleSearchInput} />
```

## Documentation

# SearchInput

The `SearchInput` component creates a search bar.

```svelte
<script>
  import { SearchInput } from '@reuters-graphics/graphics-components';

  function filterData(newSearchText: string) {
    /** This function would typically filter a dataset based on the search input.*/
    console.log('Filtering data with:', newSearchText);
  }
  function handleSearchInput(newSearchText: string) {
    /** Here's where you might update a variable, 
    filter a dataset or make an API call based on the user's input.*/
    filterData(newSearchText);
  }
</script>

<SearchInput onsearch={handleSearchInput} />
```