Inputs

Domain Prefix

Приставка домена слева и адрес страницы справа: приставку нельзя стереть, а сам адрес чистится прямо во время набора.

inputgroup
slug
prefix
url

Превью

1440pxHost theme

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

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

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

Адрес страницы

vibeui.ru/moya-komanda12/32

Подпись

Приставка

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

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

# Установка и размещение «inputgroup-010» (Domain Prefix) из VibeUI

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

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

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

## 2. Что это
Приставка домена слева и адрес страницы справа: приставку нельзя стереть, а сам адрес чистится прямо во время набора.

Сцепка «приставка домена + адрес»: приставка неинтерактивна и не уходит в форму, значение нормализуется на лету, итоговый адрес виден под полем. Ноль зависимостей, один файл.

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

<Inputgroup010
label="Адрес страницы"
prefix="vibeui.ru/"
onChange={(slug) => setSlug(slug)}
/>

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

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

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

## 5. Сохранить как установлено
- локальную палитру --vibeui-inputgroup-010-* и не подменять её токенами вашей темы
- схлопнутые границы: у соседей отрицательный margin, поэтому между половинами одна линия, а не две
- подъём фокусного элемента по z-index — без него граница соседа срезает половину обводки
- приставку вне значения: в форму уходит только сам адрес, домен добавляет сервер
- user-select:none и aria-hidden у приставки: её не выделяют и не читают отдельно от подписи
- нормализацию прямо в значении, а не при отправке: человек должен видеть ровно то, что сохранится

## 6. Можно менять
- текст label и приставку prefix
- правило нормализации — например, транслитерацию кириллицы
- предел длины и текст счётчика
- акцент через проп accent

## 7. Правила
- Уникальность адреса проверяет сервер: нормализация ничего о ней не знает.
- Не кладите в prefix кнопку: это неинтерактивная часть рамки.
- Кириллица здесь просто отбрасывается — если она нужна, добавьте транслитерацию в slugify.
- Не выносите CSS-переменные в globals.css: компонент обязан оставаться одним файлом.

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

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

npx shadcn@latest add https://vibeui.ru/r/inputgroup-010.json

https://vibeui.ru/r/inputgroup-010.json

Компонент самодостаточен: один файл, без зависимостей, собственная палитра в локальных переменных --vibeui-inputgroup-010-*. Клиентский: "use client" ради нормализации. Приставка — неинтерактивный span с user-select:none и aria-hidden, она сжимается многоточием и в форму не уходит. Значение чистится на каждый ввод: нижний регистр, пробелы и подчёркивания в дефис, лишние символы отбрасываются, повторные дефисы схлопываются, длина ограничена. Под сцепкой показан итоговый адрес и счётчик длины.

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

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

"use client"

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

export type Inputgroup010Props = Omit<
  ComponentPropsWithoutRef<"div">,
  "children" | "prefix" | "onChange"
> & {
  label?: string
  prefix?: string
  onChange?: (slug: string) => void
  accent?: string
}

// Идея компонента: приставка домена — часть будущего адреса, но не часть
// значения. Она лежит в сцепке слева, её нельзя выделить и нельзя стереть,
// а в форму уходит только сам slug. Ввод чистится на лету: верхний регистр,
// пробелы и запрещённые символы превращаются в дефис прямо под курсором —
// иначе человек видит одно, а сохраняется другое. Приставка сжимается
// многоточием: длинный домен не должен съедать место у самого адреса.
const STYLES = `
:where([data-vibeui-block="inputgroup-010"]){
--vibeui-inputgroup-010-surface:oklch(1 0 0);
--vibeui-inputgroup-010-shell:oklch(0.91 0.006 265);
--vibeui-inputgroup-010-fg:oklch(0.23 0.014 265);
--vibeui-inputgroup-010-muted:oklch(0.56 0.014 265);
--vibeui-inputgroup-010-field:oklch(0.99 0.002 265);
--vibeui-inputgroup-010-fixed:oklch(0.955 0.004 265);
--vibeui-inputgroup-010-border:oklch(0.86 0.008 265);
--vibeui-inputgroup-010-accent:oklch(0.5 0.15 175);
--vibeui-inputgroup-010-radius:0.75rem;
--vibeui-inputgroup-010-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
--vibeui-inputgroup-010-mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
[data-vibeui-block="inputgroup-010"]{
display:flex;flex-direction:column;gap:0.4375rem;
width:100%;max-width:23rem;box-sizing:border-box;padding:0.875rem;
background:var(--vibeui-inputgroup-010-surface);
border:1px solid var(--vibeui-inputgroup-010-shell);border-radius:0.875rem;
font-family:var(--vibeui-inputgroup-010-font);color:var(--vibeui-inputgroup-010-fg);
}
[data-vibeui-block="inputgroup-010"] *{box-sizing:border-box}
[data-vibeui-block="inputgroup-010"] label{font-size:0.8125rem;font-weight:600}
[data-vibeui-block="inputgroup-010"] [data-part="group"]{display:flex;align-items:stretch;min-width:0}
[data-vibeui-block="inputgroup-010"] [data-part="group"] > *{
position:relative;height:2.75rem;
border:1px solid var(--vibeui-inputgroup-010-border);
border-radius:0;margin-left:-1px;font:inherit;color:inherit;
}
[data-vibeui-block="inputgroup-010"] [data-part="group"] > *:first-child{
margin-left:0;
border-radius:var(--vibeui-inputgroup-010-radius) 0 0 var(--vibeui-inputgroup-010-radius);
}
[data-vibeui-block="inputgroup-010"] [data-part="group"] > *:last-child{
border-radius:0 var(--vibeui-inputgroup-010-radius) var(--vibeui-inputgroup-010-radius) 0;
}
[data-vibeui-block="inputgroup-010"] [data-part="group"] > *:focus{
z-index:1;outline:2px solid var(--vibeui-inputgroup-010-accent);outline-offset:-1px;
border-color:var(--vibeui-inputgroup-010-accent);
}
/* Приставка неинтерактивна: её не выделяют, не читают отдельно и по ней
   нечего нажимать. Многоточие держит её в разумной ширине. */
[data-vibeui-block="inputgroup-010"] [data-part="prefix"]{
flex:0 1 auto;min-width:0;display:flex;align-items:center;padding:0 0.625rem;
background:var(--vibeui-inputgroup-010-fixed);
color:var(--vibeui-inputgroup-010-muted);
font-family:var(--vibeui-inputgroup-010-mono);font-size:0.8125rem;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;user-select:none;
}
[data-vibeui-block="inputgroup-010"] input{
flex:1 1 8rem;min-width:0;padding:0 0.75rem;
background:var(--vibeui-inputgroup-010-field);
font-family:var(--vibeui-inputgroup-010-mono);font-size:0.875rem;font-weight:600;
}
[data-vibeui-block="inputgroup-010"] [data-part="foot"]{
display:flex;align-items:baseline;justify-content:space-between;gap:0.5rem;
margin:0;font-size:0.75rem;line-height:1.4;color:var(--vibeui-inputgroup-010-muted);
}
[data-vibeui-block="inputgroup-010"] [data-part="foot"] b{
min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
font-family:var(--vibeui-inputgroup-010-mono);font-weight:650;
color:var(--vibeui-inputgroup-010-accent);
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="inputgroup-010"] *{animation:none!important;transition:none!important}}
`

// Чистка на вводе, а не на отправке: адрес показывают человеку сразу.
function slugify(value: string) {
  return value
    .toLowerCase()
    .replace(/[\s_]+/g, "-")
    .replace(/[^a-z0-9-]/g, "")
    .replace(/-{2,}/g, "-")
    .slice(0, 32)
}

/**
 * Сцепка «приставка-домен + адрес»: приставку нельзя стереть, адрес чистится на лету.
 * Один файл, ноль зависимостей, собственная палитра.
 */
export function Inputgroup010({
  label = "Адрес страницы",
  prefix = "vibeui.ru/",
  onChange,
  accent,
  className,
  style,
  ...props
}: Inputgroup010Props) {
  const id = useId()
  const [slug, setSlug] = useState("moya-komanda")

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

  return (
    <>
      <style href="vibeui-inputgroup-010" precedence="medium">
        {STYLES}
      </style>
      <div
        {...props}
        data-vibeui-block="inputgroup-010"
        className={className}
        style={palette}
      >
        <label htmlFor={id}>{label}</label>
        <div data-part="group">
          <span data-part="prefix" aria-hidden="true">
            {prefix}
          </span>
          <input
            id={id}
            name="slug"
            type="text"
            autoComplete="off"
            spellCheck={false}
            autoCapitalize="none"
            placeholder="moya-stranica"
            value={slug}
            aria-describedby={`${id}-foot`}
            onChange={(event) => {
              const next = slugify(event.target.value)
              setSlug(next)
              onChange?.(next)
            }}
          />
        </div>
        <p data-part="foot" id={`${id}-foot`}>
          <b>
            {prefix}
            {slug || "…"}
          </b>
          <span>{slug.length}/32</span>
        </p>
      </div>
    </>
  )
}