Phone number

v4.0

The phone number field is a specialized text field enabling quick phone number entry.

Stylized artwork of a phone number field.

Considerations

Performant

Forms allow users to complete fields effortlessly.

Accessible

Anyone, no matter their abilities, can complete forms.

Dynamic

Forms provide dynamic feedback so users can correct errors quickly and confidently.

Anatomy

Phone number field diagram with 6 elements numbered: 1. Label, 2. Country dropdown, 3. Helper text, 4. Country code, 5. Value, 6. Field container.
  1. Label
  2. Country dropdown
  3. Helper text
  4. Country code
  5. Value
  6. Field container

Properties

Behavior

Screen sizes

Best practices

Specs

Phone number field specs are shown. The height of the field container is 48px, the space between the label and field container is 4px, the space between the field container and helper text is 8px, the padding inside of the right side of the field container is 16px, the padding on the right of the country selector is 8px, and the padding on the left and right of the value field is 8px.