Skip to content
Byos
ComponentsDocs
XFigma3.4k
Overview
  • Introduction
  • Get Started
  • Styling
  • Registry
  • Roadmap
Components
  • Alert
  • Autocomplete
  • Badge
  • Cascader
  • Code Block
  • Data GridVirtualization and row pinning support added
  • Date Selector
  • Event Calendar
  • File Upload
  • Filters
  • Frame
  • Gantt
  • Icon Stack
  • Icon Tile
  • Kanban
  • Number Field
  • Phone Input
  • Rating
  • Scrollspy
  • Sortable
  • Stepper
  • Timeline
  • Tree

Product

  • Components
  • Docs

Community

  • GitHub
  • X / Twitter
  • Figma

© 2026 Byos. Released under the MIT License.

3.4k

Shadcn Phone Input

PreviousNext

Custom Shadcn Phone Input for React and Tailwind CSS. A phone number input component with country selection and validation.

Base UIRadix UI
Radix UI
API Reference

We used the library to create this component.

Installation

pnpm dlx shadcn@latest add @byosui/phone-input

Usage

import { PhoneInput } from "@/components/byosui/phone-input"
<PhoneInput

More Shadcn Phone Input Components

Browse 8 production-ready Shadcn Phone Input components for dashboards, forms, and product UI. These examples follow the Radix UI implementation with accessible primitives from the Radix stack and stay fully compatible with Shadcn Create so radius, color, and typography match your configured theme.

Browse all 8 Shadcn Phone Input components for copy-ready layouts, dashboards, and forms built with Tailwind CSS in the ReUI library.

Number FieldRating

On This Page

InstallationUsageExamplesSizeAPI ReferencePhoneInputExternal Props
placeholder="Enter phone number"
defaultCountry="US"
value={value}
onChange={setValue}
/>

Examples

Size

import { PhoneInput } from "@/components/byosui/phone-input"

export function Pattern() {
  return (
    <PhoneInput
      variant="sm"
      placeholder="Enter phone number"
      defaultCountry="NL"
      value="+31612345678"
    />
  )
}

API Reference

PhoneInput

The main component for entering phone numbers with country selection.

PropTypeDefaultDescription
valuestring-The current phone number value in E.164 format.
onChange(value: string) => void-Callback fired when the value changes.
variant"sm" | "default" | "lg""default"The vertical size of the input and country selector.
popupClassNamestring-Additional CSS classes for the country selection dropdown.
defaultCountryCountry-The default country selected if no value is provided.
placeholderstring-Placeholder text for the phone number input.
classNamestring-Additional CSS classes for the root container.
disabledbooleanfalseWhether the input and country selector are disabled.

External Props

This component also accepts all props from the react-phone-number-input library.

react-phone-number-input
import { PhoneInput } from "@/components/byosui/phone-input"

export function Pattern() {
  return <PhoneInput placeholder="Enter phone number" />
}