# InputSearch

The InputSearch component allows the user to input a keyword to search from
associated data. It handles debouncing for improved performance when making
queries.

## Design & usage guidelines

InputSearch will provide a consistent experience for users searching for
content. It uses familiar iconography and interactions to make searching a
simpler experience.

## Content guidelines

The label for InputSearch should help guide the user to find their results. It
can be helpful to direct the user to use certain types of queries for a given
search, such as "Search by clients and properties".

It is recommended to use the `search` icon as a prefix to aid users in
recognizing the functionality of the input.

InputSearch will take up the full available width of its container.

## Accessibility

Most of the accessibility concerns for InputSearch are handled by `InputText`.
It is announced as an input and the label and value are read to assistive
technology. Users can navigate to the clear button to remove the entered value.

## Mockup


## Props

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `onChange` | `(newValue: string) => void` | Yes | — | A callback function that handles the update of the new value of the property value. |
| `onDebouncedChange` | `(searchValue: string) => void` | Yes | — | A callback function that handles the API call to search the value. This is where the wait value is applied to the deb... |
| `value` | `string` | Yes | — | Set the component to a given value |
| `accessibilityHint` | `string` | No | — | An accessibility hint helps users understand what will happen when they perform an action on the accessibility elemen... |
| `accessibilityLabel` | `string` | No | — | VoiceOver will read this string when a user selects the associated element |
| `autoFocus` | `boolean` | No | — | Automatically focus the input after it is rendered |
| `placeholder` | `string` | No | — | Hint text that goes above the value once the field is filled out |
| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
| `ref` | `Ref<InputTextRef>` | No | — | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (... |
| `showMiniLabel` | `boolean` | No | `true` | Controls the visibility of the mini label that appears inside the input when a value is entered. By default, the plac... |
| `wait` | `number` | No | `300` | A numeric value to represents the milliseconds in delaying the function to populate the data source when the 'value' ... |