VibeUI

Inputs

Email Typo Guard

Поле почты с двойной проверкой: сначала формат адреса, потом домен — «gmial.com» ловится и исправляется одной кнопкой.

  • input
  • email
  • validation
  • form

Превью

1440pxHost theme

Использовать с AI

  1. 1. Скопируйте ссылку.
  2. 2. Напишите агенту своими словами и вставьте её в предложение.
  3. 3. Агент откроет ссылку и поставит компонент из registry.

размести это в шапке: https://vibeui.ru/c/input-006

Проверим формат и домен, когда вы уйдёте из поля.

Показать полную инструкцию

То, что лежит по ссылке в развёрнутом виде. Нужна, если агент не может открыть ссылку — тогда вставьте этот текст целиком.

# Установка и размещение «input-006» (Email Typo Guard) из VibeUI

## 1. Сначала установка — не пропускай, не пересоздавай
Выполни эту команду до того, как писать код:
npx shadcn@latest add https://vibeui.ru/r/input-006.json

Registry item: https://vibeui.ru/r/input-006.json
Ставится в: components/vibeui/input-006.tsx (точный путь следует алиасам components.json этого проекта).
npm-зависимости: нет.
Registry-зависимости: нет.

Ставь из реестра. Не пересоздавай по описанию, не подменяй похожим
компонентом из другой библиотеки и не переписывай под стиль проекта.

## 2. Что это
Поле почты с двойной проверкой: сначала формат адреса, потом домен — «gmial.com» ловится и исправляется одной кнопкой.

Поле почты: проверка формата по уходу из фокуса, поиск опечатки в домене по расстоянию Дамерау — Левенштейна и кнопка «возможно, вы имели в виду». Ноль зависимостей, один файл, своя палитра.

## 3. Как использовать
import { Input006 } from "@/components/vibeui/input-006"

<Input006
  label="Рабочая почта"
  defaultValue="anna.orlova@gmial.com"
  onChange={(value) => setEmail(value)}
/>

Полный список пропсов — в установленном файле.

## 4. Куда поставить
Это мелкий inline-компонент. Поставь его ровно туда, куда просил
пользователь, внутрь существующей разметки. Не создавай ради него
новую страницу, секцию или обёртку. Если на этом месте уже стоит похожий
контрол — замени его, а не добавляй второй.

Куда поставить: ___
(Эту строку заполняет пользователь. Если она осталась пустой — спроси,
а не угадывай.)

## 5. Сохранить как установлено
- локальную палитру --vibeui-input-006-* и не подменять её токенами вашей темы (bg-muted, border-input и подобными)
- проверку по уходу из поля, а не на каждый символ: ругаться на недописанный адрес нечестно
- подсказку об опечатке кнопкой, а не текстом — прочитанное исправление всё равно набирают руками
- расстояние Дамерау — Левенштейна вместо обычного: перестановка букв в «gmial» должна считаться одной правкой
- type="email" и inputMode="email": на телефоне это клавиатура с собакой и точкой
- aria-invalid и aria-describedby: сообщение о формате читается вместе со значением

## 6. Можно менять
- текст label и стартовое значение defaultValue
- список частых доменов domains — под свою аудиторию
- формулировки подсказки и сообщения об ошибке
- акцент через проп accent

## 7. Правила
- Клиентская проверка ничего не гарантирует: адрес всё равно подтверждается письмом.
- Не подставляйте исправление автоматически — редкий домен, похожий на частый, тогда молча потеряется.
- Список domains держите коротким: длинный перебор расстояний считается на каждый ввод.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

## 8. Проверка
- рендерится без ошибок в консоли;
- выглядит так же, как превью на странице VibeUI, откуда взята ссылка;
- если нет — ты изменил что-то из раздела 5, верни как было.

Для разработчика

npx shadcn@latest add https://vibeui.ru/r/input-006.json
https://vibeui.ru/r/input-006.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-input-006-*. Клиентский: "use client". Формат проверяется регулярным выражением по уходу из поля (состояние checked), домен сравнивается с частыми через расстояние Дамерау — Левенштейна: перестановка соседних букв считается одной правкой, поэтому «gmial» находится как опечатка «gmail». Исправление предлагается настоящей кнопкой, которая подставляет адрес целиком. Состояние живёт на внутреннем [data-part="body"], от него красится рамка и значок.

Исходник компонента

Тот же файл, который поставит агент. Нужен, если вы предпочитаете скопировать код руками.

"use client"

import { useId, useState } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Input006Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children" | "defaultValue" | "onChange"
> & {
  label?: string
  defaultValue?: string
  domains?: string[]
  onChange?: (value: string) => void
  accent?: string
}

// Идея компонента: почту чаще всего ломает не формат, а опечатка в домене —
// «gmial.com» проходит любую регулярку и молча теряет письмо. Поле сначала
// проверяет форму адреса, а потом сравнивает домен с частыми и предлагает
// исправление одной кнопкой. Проверка включается по уходу из поля: ругаться
// на недописанный адрес нечестно.
const STYLES = `
:where([data-vibeui-block="input-006"]){
--vibeui-input-006-surface:oklch(1 0 0);
--vibeui-input-006-shell:oklch(0.91 0.006 265);
--vibeui-input-006-fg:oklch(0.23 0.014 265);
--vibeui-input-006-muted:oklch(0.55 0.014 265);
--vibeui-input-006-field:oklch(0.985 0.002 265);
--vibeui-input-006-border:oklch(0.88 0.008 265);
--vibeui-input-006-accent:oklch(0.55 0.19 262);
--vibeui-input-006-bad:oklch(0.55 0.2 25);
--vibeui-input-006-ok:oklch(0.5 0.13 155);
--vibeui-input-006-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
/* Своя светлая подложка: поле показывают поверх произвольного фона. */
[data-vibeui-block="input-006"]{
display:flex;flex-direction:column;gap:0.4375rem;
width:100%;max-width:22rem;box-sizing:border-box;padding:0.875rem;
background:var(--vibeui-input-006-surface);
border:1px solid var(--vibeui-input-006-shell);border-radius:0.875rem;
font-family:var(--vibeui-input-006-font);color:var(--vibeui-input-006-fg);
}
[data-vibeui-block="input-006"] *{box-sizing:border-box}
[data-vibeui-block="input-006"] label{font-size:0.8125rem;font-weight:600}
[data-vibeui-block="input-006"] [data-part="frame"]{
display:flex;align-items:center;gap:0.5rem;
height:2.5rem;padding:0 0.75rem;
background:var(--vibeui-input-006-field);
border:1px solid var(--vibeui-input-006-border);border-radius:0.75rem;
transition:border-color .16s ease,box-shadow .16s ease;
}
[data-vibeui-block="input-006"] [data-part="frame"]:focus-within{
border-color:var(--vibeui-input-006-accent);
box-shadow:0 0 0 3px color-mix(in oklab,var(--vibeui-input-006-accent) 18%,transparent);
}
[data-vibeui-block="input-006"] [data-state="bad"] [data-part="frame"]{border-color:var(--vibeui-input-006-bad)}
[data-vibeui-block="input-006"] [data-state="ok"] [data-part="frame"]{border-color:var(--vibeui-input-006-ok)}
[data-vibeui-block="input-006"] [data-part="body"]{display:flex;flex-direction:column;gap:0.4375rem}
[data-vibeui-block="input-006"] input{
flex:1;min-width:0;height:100%;border:0;background:none;color:inherit;
font:inherit;font-size:0.875rem;
}
[data-vibeui-block="input-006"] input:focus{outline:none}
[data-vibeui-block="input-006"] [data-part="mark"]{
flex:none;width:1rem;height:1rem;display:grid;place-items:center;
}
[data-vibeui-block="input-006"] [data-part="mark"] svg{width:1rem;height:1rem;display:block}
[data-vibeui-block="input-006"] [data-state="ok"] [data-part="mark"]{color:var(--vibeui-input-006-ok)}
[data-vibeui-block="input-006"] [data-state="bad"] [data-part="mark"]{color:var(--vibeui-input-006-bad)}
[data-vibeui-block="input-006"] [data-part="note"]{
font-size:0.75rem;line-height:1.4;color:var(--vibeui-input-006-muted);margin:0;
}
[data-vibeui-block="input-006"] [data-part="note"][data-tone="bad"]{color:var(--vibeui-input-006-bad)}
/* Исправление — настоящая кнопка: подсказку «вы имели в виду» надо уметь
   принять одним нажатием, иначе её просто перечитывают и правят руками. */
[data-vibeui-block="input-006"] [data-part="fix"]{
appearance:none;cursor:pointer;text-align:left;
padding:0.4375rem 0.625rem;border-radius:0.625rem;
border:1px dashed color-mix(in oklab,var(--vibeui-input-006-accent) 45%,transparent);
background:color-mix(in oklab,var(--vibeui-input-006-accent) 8%,transparent);
color:inherit;font:inherit;font-size:0.75rem;line-height:1.4;
transition:background-color .16s ease;
}
[data-vibeui-block="input-006"] [data-part="fix"]:hover{
background:color-mix(in oklab,var(--vibeui-input-006-accent) 15%,transparent);
}
[data-vibeui-block="input-006"] [data-part="fix"]:focus-visible{
outline:2px solid var(--vibeui-input-006-accent);outline-offset:2px;
}
[data-vibeui-block="input-006"] [data-part="fix"] b{font-weight:650;color:var(--vibeui-input-006-accent)}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="input-006"] *{animation:none!important;transition:none!important}}
`

const SHAPE = /^[^\s@]+@[^\s@.]+\.[^\s@]{2,}$/

// Расстояние Дамерау — Левенштейна: «gmial.com» отличается от «gmail.com»
// перестановкой соседних букв, а обычная Левенштейна считает её за две правки.
function distance(source: string, target: string) {
  const rows = Array.from({ length: source.length + 1 }, (_, index) =>
    Array.from({ length: target.length + 1 }, (_, column) =>
      index === 0 ? column : column === 0 ? index : 0,
    ),
  )

  for (let row = 1; row <= source.length; row += 1) {
    for (let column = 1; column <= target.length; column += 1) {
      const cost = source[row - 1] === target[column - 1] ? 0 : 1
      rows[row][column] = Math.min(
        rows[row - 1][column] + 1,
        rows[row][column - 1] + 1,
        rows[row - 1][column - 1] + cost,
      )

      if (
        row > 1 &&
        column > 1 &&
        source[row - 1] === target[column - 2] &&
        source[row - 2] === target[column - 1]
      ) {
        rows[row][column] = Math.min(
          rows[row][column],
          rows[row - 2][column - 2] + 1,
        )
      }
    }
  }

  return rows[source.length][target.length]
}

function suggest(value: string, domains: string[]) {
  const at = value.lastIndexOf("@")
  if (at < 1) return null

  const domain = value.slice(at + 1).toLowerCase()
  if (!domain || domains.includes(domain)) return null

  const near = domains.find((candidate) => distance(domain, candidate) <= 2)
  return near ? `${value.slice(0, at + 1)}${near}` : null
}

/**
 * Поле почты с проверкой формата и подсказкой при опечатке в домене.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Input006({
  label = "Рабочая почта",
  defaultValue = "anna.orlova@gmial.com",
  domains = ["gmail.com", "yandex.ru", "mail.ru", "outlook.com", "icloud.com"],
  onChange,
  accent,
  className,
  style,
  ...props
}: Input006Props) {
  const id = useId()
  const [value, setValue] = useState(defaultValue)
  const [checked, setChecked] = useState(true)

  const palette = {
    ...(accent ? { "--vibeui-input-006-accent": accent } : null),
    ...style,
  } as CSSProperties

  const valid = SHAPE.test(value)
  const fix = valid ? suggest(value, domains) : null
  const state = !checked || !value ? "idle" : valid ? "ok" : "bad"

  const apply = (next: string) => {
    setValue(next)
    setChecked(true)
    onChange?.(next)
  }

  return (
    <>
      <style href="vibeui-input-006" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="input-006"
        className={className}
        style={palette}
      >
        <label htmlFor={id}>{label}</label>
        <div data-part="body" data-state={state}>
          <div data-part="frame">
            <input
              id={id}
              type="email"
              inputMode="email"
              autoComplete="email"
              spellCheck={false}
              placeholder="name@company.com"
              value={value}
              aria-invalid={state === "bad"}
              aria-describedby={`${id}-note`}
              onChange={(event) => {
                setValue(event.target.value)
                setChecked(false)
                onChange?.(event.target.value)
              }}
              onBlur={() => setChecked(true)}
            />
            {state !== "idle" ? (
              <span data-part="mark" aria-hidden="true">
                {state === "ok" ? (
                  <svg
                    viewBox="0 0 16 16"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                  >
                    <path
                      d="M3.5 8.5 6.5 11.5 12.5 5"
                      strokeLinecap="round"
                      strokeLinejoin="round"
                    />
                  </svg>
                ) : (
                  <svg
                    viewBox="0 0 16 16"
                    fill="none"
                    stroke="currentColor"
                    strokeWidth="2"
                  >
                    <path d="M8 4.5v4.5" strokeLinecap="round" />
                    <circle
                      cx="8"
                      cy="11.75"
                      r="0.85"
                      fill="currentColor"
                      stroke="none"
                    />
                  </svg>
                )}
              </span>
            ) : null}
          </div>
          <p
            data-part="note"
            id={`${id}-note`}
            data-tone={state === "bad" ? "bad" : "calm"}
          >
            {state === "bad"
              ? "Адрес неполный: нужны имя, собака и домен."
              : "Проверим формат и домен, когда вы уйдёте из поля."}
          </p>
          {fix ? (
            <button type="button" data-part="fix" onClick={() => apply(fix)}>
              Возможно, вы имели в виду <b>{fix}</b>
            </button>
          ) : null}
        </div>
      </div>
    </>
  )
}