VibeUI
РусEng
Войти

Поля ввода

Многострочное поле с подписью

Textarea с той же плавающей подписью, что у input-001: подпись стоит в пустом поле и уезжает в верхний край при вводе, ошибка красит рамку и подпись. Тянуть можно только по вертикали. Пара к input-001 — форма из полей и сообщения выглядит одним набором.

React + Tailwind, совместим с shadcn: нажмите «Копировать для ИИ» — агент в Cursor или Claude Code поставит его через shadcn CLI.

Что можно поменять

  • label — подпись
  • hint и error — строки под полем
  • rows — высота в строках

Ссылка для ИИ-агента: в ней превью, код и инструкция.

Превью

1440pxТема страницы
Многострочное поле с подписью — Textarea с той же плавающей подписью, что у input-001: подпись стоит в пустом поле и уезжает в верхний край при вводе, ошибка красит рамку и подпись. Тянуть можно только по вертикали. Пара к input-001 — форма из полей и сообщения выглядит одним набором.

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

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

добавь это на главную первым экраном:

https://vibeui.ru/c/input-034?theme=dark

2Вставили в чат агента
3Получили в проекте

Не знаете, куда вставить? Пошаговый гайд

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

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

Загружается…

Как использовать

<Input034 name="message" label="Сообщение" hint="Коротко: что случилось и когда" required />

Пример вызова. Сам компонент агент ставит из реестра по ссылке «Копировать для ИИ».

Настройки

Подпись
label · по умолчанию: Сообщение
Строк
rows · по умолчанию: 4
Акцент
accent · по умолчанию: цвет темы
Фон
background · по умолчанию: цвет темы
Подсказка
hint
Ошибка
error

Используется в блоках

Похожие по стилю и содержимому

Варианты из той же категории с общими тегами или похожей формой контента.

  • Поле с ошибкой

    Обвязка поля: пояснение и ошибка связаны через aria-describedby и читаются вслух вместе со значением, а не отдельно.

  • Оболочка поля

    Каркас поля: рамка обнимает подпись и контрол вместе, а подсказка и ошибка делят одну строку снизу — форма не прыгает при появлении ошибки.

  • Обязательное поле со сноской

    Обязательное поле со звёздочкой, которая объясняет себя: расшифровка в <abbr>, скрытое слово для screen reader и сноска рядом с полями.

Ещё в разделе «Поля ввода»

Частые вопросы

Как установить компонент «Многострочное поле с подписью» через Cursor или Claude Code?
Нажмите «Копировать для ИИ» на этой странице и вставьте текст в чат агента. В инструкции команда установки через shadcn CLI, зависимости и что сохранить — агент поставит именно этот компонент, а не перерисует похожий.
Какие зависимости у компонента «Многострочное поле с подписью»?
Никаких npm-пакетов, кроме React и Tailwind CSS.
Что можно поменять в компоненте «Многострочное поле с подписью»?
Можно менять: label — подпись; hint и error — строки под полем; rows — высота в строках. Сохранить как есть: плавающую подпись на :placeholder-shown — placeholder занят пробелом, текст подписи только в label; resize:vertical — горизонтальное растягивание ломает сетку формы; палитру --vibeui-input-034-* и light-dark(): компонент следует color-scheme окружения.
Компонент «Многострочное поле с подписью» бесплатный?
Да. Превью открыто без регистрации, а с бесплатным аккаунтом можно скопировать до 20 компонентов в месяц.

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

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

Команде нужна подписанная ссылка: войдите и откройте «Исходник компонента» ниже — там рабочая ссылка на 30 минут. Все способы установки

Технические заметки

Компонент самодостаточен: один файл, без зависимостей, палитра в --vibeui-input-034-*. Плавающая подпись держится на :placeholder-shown, поэтому placeholder занят пробелом и в пропсах его нет; label — единственная подпись. hint — строка под полем, error её заменяет и включает aria-invalid. rows задаёт высоту в строках. Тема — light-dark() по color-scheme окружения.

Теги

  • textarea
  • message
  • form
  • field
  • floating-label
  • multiline
Исходник компонента

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

Загружается…