shadcn.io is an independent project built on shadcn/ui
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 Vue, Ark UI does not format the digits as someone types.
Installation
Anatomy
Usage
<Field class="w-full max-w-sm">
<FieldLabel>Phone Number</FieldLabel>
<InputGroup class="bg-background">
<InputGroupInput 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.
Field links FieldLabel to the input inside it, so there is no id to match.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Input Group
Sets placeholder="+1 (555) 000-0000" and type="tel". The rest is on the Input Group page.
