FieldPhone

Телефонное поле поверх FieldText. В ведущем слоте — селектор страны (AdaptiveDroplist из @cloud-ru/ds-list) с флагом и кодом; маска ввода динамически подстраивается под выбранную страну. При вставке номера из буфера страна определяется автоматически (awesome-phonenumber).

Когда использовать

• Ввод телефона с международным выбором страны.
• Нужен авто-детект страны по вставленному номеру и маскирование под формат страны.

Когда не нужен FieldPhone:

• Произвольный форматированный ввод без телефона — FieldMask.

Анатомия

Селектор страны

Ведущий слот (elementBefore) — флаг выбранной страны + код (+7, +1, …). Клик открывает AdaptiveDroplist со списком стран и поиском. Если доступна одна страна — селектор скрывается, остаётся только код в префиксе.

Mask

Маска ввода определяется выбранной страной (country.mask) и меняется при смене страны. Префикс с кодом страны добавляется к итоговому значению.

options — настройка списка стран

Проп options (CountrySettings) ограничивает или переопределяет список (взаимоисключающие поля):

• includedCountries — оставить только перечисленные страны.
• excludedCountries — исключить перечисленные из встроенного списка.
• overriddenOptions — полностью заменить список собственными опциями.

Size (default m)

Размер поля наследуется от FieldText: s, m, l.

Примеры использования

Базовый

import { PortalContextProvider } from '@cloud-ru/ds-portal-context';
import { FieldPhone } from '@cloud-ru/ds-uikit-product-fields-predefined';
import { useRef, useState } from 'react';

export function FieldPhoneBasic() {
  const hostRef = useRef<HTMLDivElement>(null);
  const [value, setValue] = useState('');

  return (
    <PortalContextProvider root={hostRef}>
      <div ref={hostRef} style={{ position: 'relative', width: 320 }}>
        <FieldPhone label='Телефон' value={value} onChange={setValue} searchPlaceholder='Поиск страны' />
      </div>
    </PortalContextProvider>
  );
}

Ограниченный список стран

import { PortalContextProvider } from '@cloud-ru/ds-portal-context';
import {
  ARMENIA_COUNTRY_CODE,
  BELARUS_COUNTRY_CODE,
  FieldPhone,
  KAZAKHSTAN_COUNTRY_CODE,
  RUSSIA_COUNTRY_CODE,
} from '@cloud-ru/ds-uikit-product-fields-predefined';
import { useRef, useState } from 'react';

export function FieldPhoneCountrySettings() {
  const hostRef = useRef<HTMLDivElement>(null);
  const [value, setValue] = useState('');

  return (
    <PortalContextProvider root={hostRef}>
      <div ref={hostRef} style={{ position: 'relative', width: 320 }}>
        <FieldPhone
          label='Телефон (СНГ)'
          value={value}
          onChange={setValue}
          options={{
            includedCountries: [
              RUSSIA_COUNTRY_CODE,
              BELARUS_COUNTRY_CODE,
              KAZAKHSTAN_COUNTRY_CODE,
              ARMENIA_COUNTRY_CODE,
            ],
          }}
        />
      </div>
    </PortalContextProvider>
  );
}

Props

Types

FieldPhoneProps

CountrySettings

Related props

FieldLayoutPresets

FieldLength

QuestionTooltipProps

Size

Type

ValidationState

Адаптивность

Выбор страны — адаптивный Droplist из @cloud-ru/ds-list: на desktop анкорный popover, на mobile — список в BottomSheet. Раскладку даёт AdaptiveProvider (@cloud-ru/ds-adaptive); отдельного пропа layoutType нет.

autoFocus на mobile выключается (наследуется из @cloud-ru/ds-fields) — вернуть можно пропом layoutPresets={{ mobile: { autoFocus: true } }}.

Storybook

Figma