PhoneField

PhoneField is a compound component that combines a masked phone input with a nested country-code Select.

Overview

PhoneField styling is split across the input plus the nested country-select family. Most visual behavior comes from shared field tokens and the nested select styling model.

Public CSS Variables

The current implementation exposes very few explicit --phone-field-* variables. Most styling hooks come from shared field tokens and the nested select parts.

Phone

Variable	Value	Affects
input size and text styling`PhoneFieldInput`	—	—
trigger and option layoutselect parts	—	—

Edit a value to try it in the demo. Hover a variable to outline what it changes; switch the preview state to see hover, pressed, focus, disabled and invalid variables. Click a name to copy it.

Part-Level Variables

Input

The input follows the shared field styling model used by other text-entry controls.

Select Family

PhoneFieldSelectCombobox, PhoneFieldSelectListbox, and PhoneFieldSelectOption expose layout hooks closer to the Select family than to a standalone PhoneField token surface.

State And Variant Interaction

strictMask changes behavior more than styling
error and disabled states should stay aligned with shared field semantics
custom selected-country rendering affects density and alignment

Examples

Theme-level field tuning

The field has no --phone-field-* variables, so a theme class retunes the shared field tokens for everything inside it.

.brand-theme {
  --fills-tertiary: color-mix(in oklch, var(--color-blue-accent-500) 6%, transparent);
  --focus-color: var(--color-blue-accent-400);
}

Select placeholder and custom icon

Without a code the trigger shows the placeholder of PhoneFieldSelectValue, and children of PhoneFieldSelectIcon replace the default chevron.

LTRRTL

select-placeholder-and-custom-icon.tsx · 41 lines

import {
  Label,
  PhoneField,
  PhoneFieldInput,
  PhoneFieldSelect,
  PhoneFieldSelectCombobox,
  PhoneFieldSelectHiddenSelect,
  PhoneFieldSelectIcon,
  PhoneFieldSelectListbox,
  PhoneFieldSelectOption,
  PhoneFieldSelectValue,
} from '@vega-ui/react';

Do Not Override

do not assume undocumented --phone-field-* hooks exist
do not style the nested select independently from the input so aggressively that the control stops reading like one field