shadcn.io is not affiliated with official shadcn/ui
Form examples · Basic Forms
Phone Input Form for React
A phone number form that checks the number against an international format before it verifies.
Phone numbers vary across countries, which makes them hard to validate. This form checks the number with a Zod regex in E.164 style: an optional plus and up to 15 digits, such as +15551234567. A Controller connects the Input to React Hook Form inside a Field, with a FieldDescription asking for the country code and a FieldError for the message, and type="tel" brings up the phone keypad. Use it for contact forms, account verification or SMS features.
Preview
Installation
FAQ
Which phone numbers pass the regex?
phone is z.string().regex(PHONE_PATTERN, "Please enter a valid phone number."), where the pattern is an optional +, a first digit from 1 to 9, then 1 to 14 more digits. Spaces, dashes, parentheses and a leading 0 fail.
Why doesn't the placeholder pass validation?
The placeholder is +1 (555) 123-4567, with spaces and punctuation. The regex only accepts digits with an optional leading +, such as +15551234567. Strip formatting before you validate, or change the placeholder, if you want them to match.
What does type tel change here?
type="tel" shows the phone keypad on mobile. It doesn't validate anything: the value is still the string Zod checks. FieldDescription says "Include country code for international numbers."
How is the phone field connected?
The Controller has name="phone" and spreads field onto the Input, and defaultValues starts phone at "". FieldLabel htmlFor matches the input's id, phone-input-form-phone. Verify is a type="submit" button.
Related
- Email Input FormA newsletter form with one email input
- URL Input FormA form with one website input that only
- Number Input FormAn age form with one number input that
- Phone InputA phone number field with a phone icon
- Simple Text Input FormA form with one username text input that
- Simple Input with Label FieldAn email input with its label above it