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
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 use Base UI primitives from @base-ui/react 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" />
}