Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Phone Input for React

A Phone Number field with a phone icon, the placeholder +1 (555) 000-0000, and the same format repeated under the field.

A Phone Number label, a phone icon inside the field, and the placeholder +1 (555) 000-0000. The same format stays in a line under the field.

Use it when you expect one format and want the phone keyboard. The browser will not check that shape. Show a bad number on the Field. In React, Base UI does not format the digits as someone types.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Input anatomy: input, placeholder, value, caret

Usage

<Field className="w-full max-w-sm">
  <FieldLabel htmlFor="phone-number">Phone Number</FieldLabel>
  <InputGroup className="bg-background">
    <InputGroupInput
      id="phone-number"
      placeholder="+1 (555) 000-0000"
      type="tel"
    />
    <InputGroupAddon>
      <PhoneIcon aria-hidden="true" />
    </InputGroupAddon>
  </InputGroup>
  <FieldDescription>Format: +1 (555) 000-0000</FieldDescription>
</Field>

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.

How is the format shown?

Twice: the placeholder, +1 (555) 000-0000, which disappears on typing, and the description, Format: +1 (555) 000-0000, which stays under the field.

How do I validate the number?

Add a pattern for one fixed format, or validate on submit with a phone library for international numbers, and show problems in FieldError.

API Reference

Field

Sets htmlFor="phone-number". The rest is on the Field page.

Input Group

Sets id="phone-number", placeholder="+1 (555) 000-0000" and type="tel". The rest is on the Input Group page.

All 24 input examples