TextField
TextField is a versatile input field that merchants can type into.
It supports several input formats including numbers.
optional = ?
| Name | Type | Description |
|---|---|---|
| label | string |
Human-readable label for the input. |
| type? | "text" | "search" | "number" |
Input type |
| value? | string |
Input value. |
| placeholder? | string |
Hint text to display when no text is input |
| multiline? | number | boolean |
Allow for multiple lines of input. |
| prefix? | string |
Text to display before the input value. |
| suffix? | string |
Text to display after the input value. |
| error? | string |
Error text to display beneath the label. |
| onInput? | (value: string) => void |
Callback when value is changed. |
| onChange? | (value: string) => void |
Callback when user leaves the input. |
| onFocus? | () => void | Promise< |
Callback when input is focused. |
| onBlur? | () => void | Promise< |
Callback when focus is removed. |
| clearButton? | boolean |
Show a 'clear text' button in the input. |
| onClearButtonPress? | () => void |
Callback when clear button is pressed. |
TextFieldwill expand to the width of its container
| ✅ Do | 🛑 Don't |
|---|---|
📱 Stack TextField components vertically |
📱 Stack TextField components horizontally |
| Use TextField to capture merchant text input |
For more guidelines, refer to Polaris' Text Field best practices.