Skip to main content

Phone input

Phone input in Storybook
Note: There are deprecated versions of this component. Switch to a version of the docs older than 10.0.x to view their docs.

Usage​

Overview​

A phone number field is an enhanced input field that enables users to enter their phone number.

When to use​

To collect or verify users' contact information.

When not to use​

  • To input a numeric value and incrementally increase or decrease the value. Use the number input instead.
  • To input money in a specific currency, such as euros and dollars. Use the currency input instead.
  • For single-line or multi-line text entry. Use the text input or the text area instead.

Formatting​

Anatomy​

Image that depicts phone input anatomy

  1. Label: describes the purpose of an input field.
  2. Helper text: Provides extra context, hints, or helpful information to aid the user. Often used to explain specific requirements for correctly filling out a field.
  3. Phone input field: Enhanced field that enables users to enter their phone number. It only accepts numeric inputs and is automatically formatted.
  4. Country code selector (optional): Dropdown that enables selection of country codes from a list. The code is prefixed with the associated country flag to help with recognition.

Label position​

The label for the phone input field can appear at the top (default and recommended) or on the left of the input itself.

Image that depicts the placement of the phone input label at the top or on the left of the component

Country codes​

In the case of multiple countries, country codes appear in a closed dropdown list and are ordered alphabetically.

Content​

General writing guidelines​

  • Use sentence case for all aspects of designing Guidewire product interfaces. Don't use title case.
  • Use present tense verbs and active voice in most situations.
  • Use common contractions to lend your copy a more natural and informal tone.
  • Use plain language. Avoid unnecessary jargon and complex language.
  • Keep words and sentences short.

Include a label​

Place a clear, visible label outside the phone input field. An input field without a label is ambiguous and not accessible.

Do position a permanent label outside the field.
Don't assume that the field is self-explanatory without a label.

Use help text​

Use help text to provide guidance about what to input and how. Here are some examples of what you might include in help text:

  • Context to aid the user, such as how the information will be used
  • Hints for what kind of information goes inside the input field
  • Formatting examples or requirements

Only use help text for pertinent information. Avoid using help text that simply restates the same information that appears in the label.

Use sentence case for help text. Write the help text as 1-2 short, complete sentences that end with a period. When showing formatting examples, you don't need to end with a period.

Do use help text to provide additional aid or context to the user.
Don't use help text to simply restate the same information that appears in the label.

Don't use placeholder text​

Don't put placeholder text in the phone entry field. Placeholder text strains users' short-term memory because it disappears once a value is entered. It also poses additional burdens for users with visual and cognitive impairments.

Instead, place hints and instructions, including formatting examples and requirements, outside of the field.

Source: Nielsen Norman Group

Do place hints and instructions, including formatting examples and requirements, outside of the field.
Don't add placeholders to the phone entry field.

Use error text to guide users​

Error message text tells a user how to fix the error. In the case of the phone input field, errors are often related to something that must be fixed for in-line validation. For example, if the user doesn't fill out a required field that asks for their phone number, you can use error text to guide them to a solution: "Enter your phone number."

Use sentence case for error text. Write 1-2 short, complete sentences that end with a period.

Do use error text to guide the user and show them a solution.
Don't write ambiguous error messages or leave users guessing as to how to resolve a problem.

Mark required fields​

Use an asterisk (*) to indicate required fields. The asterisk precedes the field label. This helps users to easily locate which fields are required by scanning just the left-most character of the label.

In addition to marking required fields with an asterisk, it is recommended to include clear instructions at the top of the form, such as "All fields marked with an asterisk are mandatory," to ensure users understand the meaning of the asterisk.

Do use an asterisk to indicate that a field is required.
Don't use an asterisk to denote anything that is optional.

Use sentence case​

Field labels appear in sentence case.

Refer to the UI text style guide for more information on how to implement sentence case.

Do use sentence case.
Don't use title case. It hinders readability.

Behaviors​

States​

The phone input field appears with no value (default), placeholder text, or a filled input.

VisualStateDescription
Phone input with no valueNo value (default)Indicates to the user that no value has been entered and there is no placeholder.
Phone input with placeholder textPlaceholderIndicates to the user that no value has been entered. The placeholder is grayed out.
Phone input with filled textFilled inputIndicates to the user that the input is filled with data.

Phone input fields also have interactive states for enabled, focus, disabled, error, read-only, and display-only.

Image that depicts phone input interactive states

StateDescription
EnabledIndicates to the user that the element is enabled for interaction.
FocusIndicates to the user which UI element in the system is focused.
DisabledIndicates to the user that the input value can't be changed because of local factors. For example, a checkbox above the input field must be checked to access this input field. The user can take action to enable it by interacting with the page.
ErrorIndicates that the user has made a validation error. Error text provides corrective feedback to users.
Read-onlyIndicates to the user that the input value can't be changed because of outside factors. For example, lack of write access. The user can take action to enable it by, for example, contacting an administrator.
Display-onlyThe display-only state is used for two cases:
  • A UI element is used in display mode.
  • A UI element is displayed in edit mode, but is never editable.
This state was called “read-only” before.

Interactions​

The user may type in the phone number by selecting or focusing on the phone input area. Entries get formatted on focus out.

Image that depicts user interacting with phone input using mouse

Accessibility​

The contrast ratio of textual elements against their background is above 4.5:1 as per WCAG 2.1 AA requirements. Non-textual content that needs to convey meaning (such as icons and keyboard focus visibility) has a contrast ratio of at least 3:1 with its adjacent colors. All content is visible and functional up to and including 400% without requiring scrolling in two dimensions.

This component has been validated to meet the WCAG 2.1 AA accessibility guidelines. However, changes made by the content author can affect accessibility conformance.

When using this component within your application, ensure that labels and instructions are meaningful and concise. Provide supplemental instructions if necessary.