shadcn.io is not affiliated with official shadcn/ui
Input examples · Types
Phone Input for React
A phone number field with a phone icon and a format hint.
Phone numbers come in many formats, so show the one you expect. This example uses an input with type tel, a PhoneIcon in an InputGroupAddon, and a description under the field with the format. Use it in contact, checkout and account forms.
Preview
Installation
FAQ
What does type tel give this field?
Phones show the dial pad, and browsers offer saved numbers. Unlike email or url, the browser doesn't validate the format, because phone formats vary by country.
How is the icon placed inside the field?
The field is an InputGroup: InputGroupInput is the input and InputGroupAddon holds PhoneIcon. The addon comes after the input in the markup and sits at the inline start, so it is on the left in left-to-right text and on the right in right-to-left text. Clicking it focuses the input.
Is the icon read by screen readers?
No. PhoneIcon has aria-hidden, because the Phone Number label already names the field. The icon is a visual hint only.
How is Phone Number tied to the field?
Clicking the label focuses the field, and screen readers announce it with the field.
FieldLabel sets htmlFor to phone-number, the input's id.