Text field

A text field is an input field that a merchant can type into. It has a range of options and supports several text formats including numbers.


Examples

Use to allow merchants to provide text input when the expected input is short. For longer input, use the auto grow or multiline options.

Drag to resize example
<TextField label="Store name" />
Name
Type
Description
prefix
React.ReactNode
Text to display before value
suffix
React.ReactNode
Text to display after value
placeholder
string
Hint text to display
value
string
Initial value for the input
helpText
React.ReactNode
Additional hint text to display
label
string
Label for the input
labelAction
Action
Adds an action to the label
labelHidden
boolean
Visually hide the label
disabled
boolean
Disable the input
readOnly
boolean
Disable editing of the input
autoFocus
boolean
Automatically focus the input
multiline
boolean or number
Allow for multiple lines of input
error
boolean or string
Error to display beneath the label
connectedRight
React.ReactNode
An element connected to the right of the input
connectedLeft
React.ReactNode
An element connected to the left of the input
type
enum
Determine type of input
name
string
Name of the input
id
string
ID for the input
step
number
Limit increment value for numeric and date-time inputs
autoComplete
boolean
Enable automatic completion by the browser
max
number
Mimics the behavior of the native HTML attribute, limiting how high the spinner can increment the value
maxLength
number
Maximum character length for an input
min
number
Mimics the behavior of the native HTML attribute, limiting how low the spinner can decrement the value
minLength
number
Minimum character length for an input
pattern
string
A regular expression to check the value against
spellCheck
boolean
Indicate whether value should have spelling checked
onChange
function(value: string, id: string)
Callback when value is changed
onFocus
function()
Callback when input is focused
onBlur
function()
Callback when focus is removed

Purpose

Put the merchant first by identifying the problem they face and the component that helps them solve it.

Problem

Merchants need to add information to Shopify.

Solution

Text fields are input fields that merchants can type into.


Best practices

Text fields should:

  • Be clearly labeled so it’s obvious to the merchant what they should enter into the field
  • Be labeled as “Optional” when you need to request input that’s not required
  • Only ask for information that’s really needed
  • Validate input as soon as merchant has finished interacting with a field (but not before)

Content guidelines

Field label

A label is a short description of the requested input. Labels are not instructional text but they should be meaningful and clearly indicate what is expected. Labels should be:

  • Placed above or beside the form field
  • Short and succinct (1–3 words)
  • Written in sentence case (the first word capitalized, the rest lowercase)
  • Email address

  • Phone number

  • What is your email address?

  • My phone number is:

Field placeholder text

Placeholder text is shown inside the form field to teach the merchant what to input. Field placeholder text should:

  • Be used only for supplementary information because the text has low contrast and is not visible when text is entered
  • Be written as examples instead of instructions
  • Include “e.g.” before an example
  • e.g. FALLSALE

  • Name your discount code

Designating optional fields

Try to only ask for information that’s required. If you need to ask merchants to provide optional information, mark the field optional by placing the text “(optional)” at the end of the field’s label. Don’t mark required fields with asterisks.

  • Phone number (optional)

  • First name*

Help text

Help text provides extra guidance or instruction to people filling out a form field. It can also be used to clarify how the information will be used. As with all form content, help text should be succinct and easy to read.

  • 9-digit number

  • Example: 123-456-789

Validation error messages

Error messages should:

  • Clearly explain what went wrong and how to fix it
  • Be short and concise, no more than a single sentence
  • Use passive voice so merchants don’t feel like they’re being blamed them for the error
  • Store name is required

  • You didn’t enter a store name.