Поле телефона
Код страны
Телефон с кодом страны в нативном списке и флагом-эмодзи: код и номер — два поля, сросшихся в одну рамку.
Что можно поменять
- имя поля через label, заглушку через placeholder и набор стран через countries
- цвет фокуса через accent
- порядок стран: чаще всего нужные ставятся первыми
Ссылка для ИИ-агента: в ней превью, код и инструкция.
Превью
Использовать с ИИ
- 1. Скопируйте ссылку.
- 2. Напишите агенту своими словами и вставьте её в предложение.
- 3. Агент откроет ссылку и поставит компонент из реестра.
добавь это на главную первым экраном:
https://vibeui.ru/c/phoneinput-001?theme=dark
Не знаете, куда вставить? Пошаговый гайд
Показать полную инструкцию
То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.
Загружается…
Для разработчика
Команда установки — в блоке «Исходник компонента» ниже: подписанная ссылка действует сутки.
Технические заметки
Компонент самодостаточен: один файл, без зависимостей, палитра в локальных переменных --vibeui-phoneinput-001-*. Серверный: из хуков только useId, состояния нет. Код страны — нативный <select>: на телефоне открывается системное колесо, а не самодельный список, который не помещается на экран. Флаг — эмодзи в тексте пункта, поэтому не нужны ни спрайты, ни иконочный пакет. Рамка одна на два поля: у select и input её нет, рисует обёртка [data-part="group"], а фокус подсвечивает всю пару через :has(:focus-visible) — иначе светилась бы половина рамки. Поле номера объявлено type="tel" с inputMode="tel" и autoComplete="tel-national": на телефоне открывается цифровая клавиатура, а автозаполнение подставляет номер без кода страны.
Теги
- phone
- input
- country
- select
Исходник компонента
Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.
Загружается…