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.
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.
Use to allow merchants to provide text input when the expected input is short. For longer input, use the auto grow or multiline options.
Screen readers convey information about text fields automatically through native HTML.
disabled
prop to add the HTML disabled
attribute to the text field.readOnly
prop to add the HTML readonly
attribute to the text field.type
prop, then some assistive technologies adapt the software keyboard to the current task. This helps merchants with mobility, vision, and cognitive issues to enter information more easily.Use the id
prop to provide a unique id
attribute value for the text field. If you don't provide an id
, then the component generates one automatically. All text fields need to have unique id
values.
The label
prop is required to convey the purpose of the checkbox to all merchants.
If there are separate visual cues that convey the purpose of the text field to sighted merchants, then the label can be visually hidden with the labelHidden
prop.
When you provide help text via the helpText
prop or an inline error message via the error
prop, the help or error content is conveyed to screen reader users with the aria-describedby
attribute. This attribute causes the content to be read along with the label, either immediately or after a short delay.
Use the placeholder
prop to provide additional instructions. However, don’t rely on placeholders alone since the content isn’t always conveyed to all merchants.
Use the placeholder to provide information that’s required to use the text field.
Text fields have standard keyboard support.
type
is set to number
, then merchants can use the up and down arrow keys to adjust the value typed into the fielddisabled
prop will prevent the text field from receive keyboard focus or inputsreadOnly
prop allows focus on the text field but prevents input or editinginputMode
prop can be used to bring up a relevant keyboard for merchants on mobile; it’s passed down to the input as an inputmode
attributeAlthough you can use the autoFocus
prop to automatically move focus to the text field, it’s generally best to avoid focusing on fields automatically. The autoFocus
prop is set to false
by default and should only be used in cases where it won’t force focus to skip other controls or content of equal or greater importance.
ariaControls
and ariaOwns
props (which implement the aria-controls
and aria-owns
attributes) to point to the id
of the autocomplete list.ariaAutocomplete
prop to indicate what kind of aria-autocomplete
input is provided, either list
or inline
. Typically, list
is used.ariaActiveDescendant
prop indicates which option has programmatic focus so that it can be conveyed to screen reader users.To learn more about implementing a text field with autocomplete, see the autocomplete component.
Use to allow merchants to provide text input when the expected input is short. For longer input, use the auto grow or multiline options.
Use when input text should be a number.
This will display the right keyboard on mobile devices.
Use when the text input should be an email address.
This will display the right keyboard on mobile devices.
Use when the expected input could be more than one line. The field will automatically grow to accommodate additional 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.
Use to show short instructional content below the text field. Help text works to help merchants understand how to fix errors that result from incorrect formatting (such as dates or passwords with specific character requirements). If more explanation is needed, link to the Shopify Help Center.
Use as a special form of help text that works best inline.
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 (like “kg” or “lb”) as a connected field.
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.
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.
See Material Design and development documentation about accessibility for Android:
Use to allow merchants to provide text input when the expected input is short. For longer input, use the auto grow or multiline options.
Use when input text should be a number.
This will display the right keyboard on mobile devices.
Use when the text input should be an email address.
This will display the right keyboard on mobile devices.
Use when the expected input could be more than one line. The field will automatically grow to accommodate additional 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.
Use to show short instructional content below the text field. Help text works to help merchants understand how to fix errors that result from incorrect formatting (such as dates or passwords with specific character requirements). If more explanation is needed, link to the Shopify Help Center.
Use as a special form of help text that works best inline.
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 (like “kg” or “lb”) as a connected field.
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.
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.
See Apple’s Human Interface Guidelines and API documentation about accessibility for iOS:
Text fields should:
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:
Email address
Phone number
What is your email address?
My phone number is:
Placeholder text is shown inside the form field to teach merchants what to input. Field placeholder text should:
Example: FALLSALE
Name your discount code
e.g. FALLSALE
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 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
Error messages should:
Store name is required
You didn’t enter a store name.