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.
Use to allow merchants to provide text input when the expected input is short. For longer input, use the auto grow or multiline options.
<TextField label="Store name" />
Put the merchant first by identifying the problem they face and the component that helps them solve it.
Merchants need to add information to Shopify.
Text fields are input fields that merchants can type into.
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)
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)
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
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)
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.
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.