diff --git a/src/components/TextField/README.md b/src/components/TextField/README.md index da6c5b5eebc..90f2b0a45b1 100644 --- a/src/components/TextField/README.md +++ b/src/components/TextField/README.md @@ -68,102 +68,7 @@ Text fields should: ## 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) - - - -#### Do - -- Email address -- Phone number - -#### Don’t - -- 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 “Example:” before an example - - - -#### Do - -- Example: FALLSALE - -#### Don’t - -- Name your discount code -- e.g. FALLSALE - - - -### 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 unless it is expected by the [local cultural norm](https://polaris.shopify.com/foundations/internationalization#plan-for-cultural-differences). - - - -#### Do - -Phone number (optional) - -#### Don’t - -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. - - - -#### Do - -9-digit number - -#### Don’t - -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](https://polaris.shopify.com/content/grammar-and-mechanics) so merchants don’t feel like they’re being blamed for the error - - - -#### Do - -Store name is required - -#### Don’t - -You didn’t enter a store name. - - +For text field content guidelines, reference the [text fields experience](https://polaris.shopify.com/experiences/text-fields) page. ---