Read-only phone input
For AI Agents
Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.
Best for: A stored number the user can focus, select and copy but not retype, for summary and confirmation screens
When to use
- Sign up, contact and checkout forms that collect a number together with its country dial code
- Edit and account screens that show a saved number, either editable or read only
- Single market forms that open preset to one country and format the number the local way
When not to use
- A field that should look greyed out and refuse focus entirely: use the Phone Input Disabled example
- A plain tel field in one fixed national format with no country picker: use the Input component
- A one time code sent by text message once the number is known: use the Input Otp component
- A complete personal details page with avatar, name, email and phone in one layout: use the Profile blocks
Agent notes
readOnlyreaches only the number field; the country button still opens, and picking a country outside +1 clears the shown number- Nothing validates the number; check it yourself and pass
aria-invalidtoPhoneInput, which turns the country button and the field red placeholderis the only text naming the field in every example; tie a label to it by id, or pass an aria label- Height comes from
variantset tosm,defaultorlg, notsize, which stays the native input attribute
https://reui.io/components/phone-input/c-phone-input-8.mdget_example("c-phone-input-8")npx shadcn@latest add @reui/c-phone-input-8Shadcn Components in Phone Input Read-Only
About Shadcn Phone Input Read-Only
Read-only phone input. Built with the Phone Input component. A free, open source shadcn phone input example you can install with npx shadcn@latest add @reui/c-phone-input-8 and edit as your own code.
What You Can Build With Shadcn Phone Input Read-Only
- Composes Phone Input, so it drops into any project already using those components.
- Install it with the shadcn CLI: npx shadcn@latest add @reui/c-phone-input-8
- Open source and free, with the full source on this page to copy or adapt.
More Shadcn Phone Input Examples
- Basic Basic phone input
- Small Small phone input
- Large Large phone input
- Disabled Disabled phone input
- Preset Value Phone input with preset value
- Error State Phone input with error state
- Default Country Phone input with specific default country
Related Shadcn Component Categories
Open-source shadcn popover components for inline settings, contextual actions, and lightweight overlays.
Open-source shadcn progress components for upload progress, goal tracking, and setup steps.
Open-source shadcn questionnaire components for onboarding surveys, multi-step question flows, and guided feedback.
Open-source shadcn radio group components for single-choice forms, plan selection, and settings preferences.
Open-source shadcn rating components for product reviews, feedback forms, and satisfaction scores.
Open-source shadcn resizable components for split panes, workspace layouts, and draggable dividers.
Frequently Asked Questions
When should I use Shadcn Phone Input Read-Only?
Use it for a stored number the user can focus, select and copy but not retype, for summary and confirmation screens.
Shadcn Phone Input as a whole fits:
- Sign up, contact and checkout forms that collect a number together with its country dial code
- Edit and account screens that show a saved number, either editable or read only
- Single market forms that open preset to one country and format the number the local way
For a field that should look greyed out and refuse focus entirely, use the Phone Input Disabled example. For a plain tel field in one fixed national format with no country picker, use the Input component. For a one time code sent by text message once the number is known, use the Input Otp component. For a complete personal details page with avatar, name, email and phone in one layout, use the Profile blocks.
How do I install Shadcn Phone Input Read-Only?
Is Shadcn Phone Input Read-Only free to use?
Which components does Shadcn Phone Input Read-Only use?
Start building with ReUI Pro today.
Every Pro block, every style, and every future addition, with one license for unlimited projects.
From $249, once. Lifetime updates.