• Props
  • Guidelines

TextField

TextField is a versatile input field that merchants can type into.

It supports several input formats including numbers.

Props

Anchor link to section titled "Props"

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<void> Callback when input is focused.
onBlur? () => void | Promise<void> Callback when focus is removed.
clearButton? boolean Show a 'clear text' button in the input.
onClearButtonPress? () => void Callback when clear button is pressed.

Guidelines

Anchor link to section titled "Guidelines"
  • TextField will 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.

On this page

  • Props
  • Guidelines