# InputFieldWrapper

This component is used to wrap input fields such as
[InputText](../InputText/InputText.md) and
[InputPressable](../InputPressable/InputPressable.md) to provide common patterns and
functionality present in our input designs, such as suffix/prefix icons,
placeholders, etc.

## Design & usage guidelines

### Prefix/Suffix

Use a prefix or suffix when additional visual cues about an input's function may
be helpful.

Some fields have common visual patterns such as "search" having a magnifying
glass icon, "Select" having a downwards arrow, or currency inputs having a
currency symbol. These signifiers reinforce the purpose of the input to increase
[Recognition over Recall](https://www.nngroup.com/articles/ten-usability-heuristics/)
and align the input with
[Consistency and Standards](https://www.nngroup.com/articles/ten-usability-heuristics/).
With clearer guidance around the purpose of inputs, the user is able to better
focus on the task at hand. See
[InputFieldWrapper/Prefix and Suffix example](/storybook/mobile/?path=/story/components-private-inputfieldwrapper--prefix-and-suffix).

## Related components

Refer to [InputText](../InputText/InputText.md) and
[InputPressable](../InputPressable/InputPressable.md) to see implementation examples
using InputFieldWrapper.


## Configuration

### Clearable

When setting `showClearAction` to `true` you must also provide an `onClear`
callback that will clear the input you are wrapping. See
[InputDate](../InputDate/InputDate.md) and
[InputPressable](../InputPressable/InputPressable.md) or
[InputText](../InputText/InputText.md) for examples.

See
[InputFieldWrapper/Clearable example](/storybook/mobile/?path=/story/components-private-inputfieldwrapper--clearable).


## Props

### Mobile

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `assistiveText` | `string` | No | — | Text that goes below the input to help the user understand the input |
| `disabled` | `boolean` | No | — | Disable the input |
| `error` | `FieldError` | No | — |  |
| `focused` | `boolean` | No | `false` |  |
| `hasValue` | `boolean` | No | `false` |  |
| `invalid` | `boolean | string` | No | — | Highlights the field red and shows message below (if string) to indicate an error |
| `loading` | `boolean` | No | `false` | Show loading indicator. |
| `loadingType` | `"glimmer" | "spinner"` | No | `spinner` | Change the type of loading indicator to spinner or glimmer. |
| `multiline` | `boolean` | No | `false` | Whether the input is a multiline input. |
| `onClear` | `() => void` | No | — | Callback called when the user clicks the ClearAction button. Should clear the value passed. To disallow clearing set ... |
| `placeholder` | `string` | No | — | Hint text that goes above the value once the field is filled out |
| `placeholderMode` | `"hidden" | "mini" | "normal"` | No | `normal` | Controls how the placeholder text is displayed. - normal: the placeholder text will be displayed in the normal placeh... |
| `prefix` | `{ icon?: IconNames; label?: string; }` | No | — | Symbol to display before the text input |
| `showClearAction` | `boolean` | No | `false` | Adds the ClearAction that will call the onClear handler when pressed |
| `styleOverride` | `InputFieldStyleOverride` | No | — | Custom styling to override default style of the input field |
| `suffix` | `{ icon?: IconNames; label?: string; onPress?: () => void; }` | No | — | Symbol to display after the text input |
| `toolbar` | `ReactNode` | No | — | Add a toolbar below the input field for actions like rewriting the text. |
| `toolbarVisibility` | `"always" | "while-editing"` | No | `while-editing` | Change the behaviour of when the toolbar becomes visible. |