Components menu
  2. components
  3. forms
  4. text field

Text field

A text field is an input field that merchants 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

Props

ariaActiveDescendant
string
Indicates the id of a related component’s visually focused element to the input
ariaAutocomplete
string
Indicates what kind of user input completion suggestions are provided
ariaControls
string
Indicates the id of a component controlled by the input
ariaOwns
string
Indicates the id of a component owned by the input
autoComplete
boolean
Enable automatic completion by the browser
autoFocus
boolean
Automatically focus the input
connectedLeft
React.ReactNode
An element connected to the left of the input
connectedRight
React.ReactNode
An element connected to the right of the input
disabled
boolean
Disable the input
error
string | ReactElement | (string | ReactElement)[] | boolean
Error to display beneath the label
focused
boolean
Force the focus state on the input
helpText
React.ReactNode
Additional hint text to display
id
string
ID for the input
labelRequired
string
Label for the input
labelAction
Action
Adds an action to the label
labelHidden
boolean
Visually hide the label
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
multiline
boolean | number
Allow for multiple lines of input
name
string
Name of the input
pattern
string
A regular expression to check the value against
placeholder
string
Hint text to display
prefix
React.ReactNode
Text to display before value
readOnly
boolean
Disable editing of the input
role
string
Defines a specific role attribute for the input
showCharacterCount
boolean
Indicates whether or not the character count should be displayed
spellCheck
boolean
Indicate whether value should have spelling checked
step
number
Limit increment value for numeric and date-time inputs
suffix
React.ReactNode
Text to display after value
type
"text" | "email" | "number" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "month" | "time" | "week" | "currency"
Determine type of input
value
string
Initial value for the input
onBlur
() => void
Callback when focus is removed
onChange
(value: string, id: string) => void
Callback when value is changed
onFocus
() => void
Callback when input is focused

Default text field

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

Default text field

Number field

Use when input text should be a number.

This will display the right keyboard on mobile devices.

Number text field with numeric keyboard

Email field

Use when the text input should be an email address.

This will display the right keyboard on mobile devices.

Email field with email keyboard

Multiline text field

Use when the expected input could be more than one line. The field will automatically grow to accommodate additional text.

Multi-line text field

Text field with placeholder text

Use to provide a short, non-essential hint about the expected input. Placeholder text is low-contrast, so don’t rely on it for important information.

Default text field with placeholder text hint

Text field with help text

Use to show short instructional content below the text field. Use especially when incorrect formatting will result in an error and merchants don’t know what format is required (e.g. to explain the correct format for dates, or requirements for a password). If more explanation is needed, link to the Shopify Help Center.

Default text field with help text

Text field with prefix or suffix

Use as a special form of help text that works best inline.

  • Use a prefix for things like currency symbols (e.g. “$”, “¥”, “£”).
  • Use suffix for things like units of measure (e.g. “in”, “cm”).

Default text field with prefix and suffix

Text field with connected fields

Use when a text field and several related fields make up a logical unit.

If inputting weight as a number and a separate unit of measurement, use a text field with a selector (e.g. “kg”, “lb”) as a connected field.

Text field with connected selector

Text field with icon action

Use to let merchants take an action within the text field.

For example, tap on a barcode icon to launch the camera and scan barcode for the barcode field. This helps merchants simplify their input.

Text field with icon action inside the text field

Text field with validation error

Use to let merchants know if their input is valid or if there’s an error. Whenever possible, validate input as soon as merchants have finished interacting with a field (but not before). If a field already has an error, validate and remove errors as merchants type so they can immediately see when an error has been fixed.

Text field with error

Default text field

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

Default text field

Number field

Use when input text should be a number.

This will display the right keyboard on mobile devices.

Number text field with numeric keyboard

Email field

Use when the text input should be an email address.

This will display the right keyboard on mobile devices.

Email field with email keyboard

Multiline text field

Use when the expected input could be more than one line. The field will automatically grow to accommodate additional text.

Multi-line text field

Text field with placeholder text

Use to provide a short, non-essential hint about the expected input. Placeholder text is low-contrast, so don’t rely on it for important information.

Default text field with placeholder text hint

Text field with help text

Use to show short instructional content below the text field. Use especially when incorrect formatting will result in an error and merchants don’t know what format is required (e.g. to explain the correct format for dates, or requirements for a password). If more explanation is needed, link to the Shopify Help Center.

Default text field with help text

Text field with prefix or suffix

Use as a special form of help text that works best inline.

  • Use a prefix for things like currency symbols (e.g. “$”, “¥”, “£”).
  • Use suffix for things like units of measure (e.g. “in”, “cm”).

Default text field with prefix and suffix

Text field with connected fields

Use when a text field and several related fields make up a logical unit.

If inputting weight as a number and a separate unit of measurement, use a text field with a selector (e.g. “kg”, “lb”) as a connected field.

Text field with connected selector

Text field with icon action

Use to let merchants take an action within the text field.

For example, tap on a barcode icon to launch the camera and scan barcode for the barcode field. This helps merchants simplify their input.

Text field with icon action inside the text field

Text field with validation error

Use to let merchants know if their input is valid or if there’s an error. Whenever possible, validate input as soon as merchants have finished interacting with a field (but not before). If a field already has an error, validate and remove errors as merchants type so they can immediately see when an error has been fixed.

Text field with error

Best practices

Text fields should:

  • Be clearly labeled so it’s obvious to merchants 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 merchants have 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 merchants 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 for the error

  • Store name is required

  • You didn’t enter a store name.