Fanvue API Documentation

import { PhoneField } from "@fanvue/ui";
import type { PhoneFieldProps, PhoneFieldSize } from "@fanvue/ui";

Examples

Default

import { PhoneField } from "@fanvue/ui";

const ItalyFlag = () => (
  <span aria-hidden="true" className="text-base leading-none">
    🇮🇹
  </span>
);

<PhoneField
  label="Phone number"
  dialCode="+39"
  flag={<ItalyFlag />}
  placeholder="Input Content"
/>

Filled

import { PhoneField } from "@fanvue/ui";

const ItalyFlag = () => (
  <span aria-hidden="true" className="text-base leading-none">
    🇮🇹
  </span>
);

<PhoneField
  label="Phone number"
  dialCode="+39"
  flag={<ItalyFlag />}
  placeholder="Input Content"
  defaultValue="3381020300"
/>

Error State

import { PhoneField } from "@fanvue/ui";

const ItalyFlag = () => (
  <span aria-hidden="true" className="text-base leading-none">
    🇮🇹
  </span>
);

<PhoneField
  label="Phone number"
  dialCode="+39"
  flag={<ItalyFlag />}
  placeholder="Input Content"
  error
  errorMessage="Enter a valid phone number"
  defaultValue="33810"
/>

With Helper Text

import { PhoneField } from "@fanvue/ui";

const ItalyFlag = () => (
  <span aria-hidden="true" className="text-base leading-none">
    🇮🇹
  </span>
);

<PhoneField
  label="Phone number"
  dialCode="+39"
  flag={<ItalyFlag />}
  placeholder="Input Content"
  helperText="We'll send a verification code to this number"
/>

All sizes

import { PhoneField } from "@fanvue/ui";

const ItalyFlag = () => (
  <span aria-hidden="true" className="text-base leading-none">
    🇮🇹
  </span>
);

<div className="flex w-[375px] flex-col gap-4">
  <PhoneField
    size="48"
    label="Size 48"
    flag={<ItalyFlag />}
    dialCode="+39"
    defaultValue="3381020300"
  />
  <PhoneField
    size="40"
    label="Size 40"
    flag={<ItalyFlag />}
    dialCode="+39"
    defaultValue="3381020300"
  />
  <PhoneField
    size="32"
    label="Size 32"
    flag={<ItalyFlag />}
    dialCode="+39"
    defaultValue="3381020300"
  />
</div>

Props

PhoneField

A phone number input with a country selector (flag + chevron), a fixed dial code prefix, and a tel input. The country picker itself is owned by the consumer: pass the selected country’s flag and dialCode, and open your picker from onCountrySelect. Provide at least one of label, aria-label, or aria-labelledby for accessibility — a console warning is emitted in development if none are set.

string

default:"Select country"

Accessible name for the country selector button.

ReactNode

Dial code of the selected country, shown before the number (e.g. "+39").

boolean

default:"false"

Whether the field is in an error state.

string

Error message displayed below the input. Shown instead of helperText when error is true.

ReactNode

Flag of the selected country, rendered in the country selector (e.g. an image or flag icon).

boolean

default:"false"

Whether the field stretches to fill its container width.

string

Helper text displayed below the input. Replaced by errorMessage when error is true.

string

Label text displayed above the input. Also used as the accessible name.

(() => void)

Fired when the country selector (flag + chevron) is activated. Open the country picker here.

"32" | "40" | "48"

default:"48"

Height of the phone field in pixels.

Exported types

Also exported from @fanvue/ui: PhoneFieldProps, PhoneFieldSize.

Setup: Installation · Theming

Getting Started

Actions

Forms & Inputs

Overlays & Dialogs

Navigation

Data Display

Feedback & Status

Layout

Media & Audio

Creator & Social

Charts

Icons & Flags

Utility

PhoneField

Examples

Default

Filled

Error State

With Helper Text

All sizes

Props

PhoneField

Exported types

​Examples

​Default

​Filled

​Error State

​With Helper Text

​All sizes

​Props

​PhoneField

​Exported types

Examples

Default

Filled

Error State

With Helper Text

All sizes

Props

PhoneField

Exported types