Input

Базовый с placeholder

Значение: —

Типы и состояния

Размеры

Состояния

Входные параметры

Имя	Тип	По умолчанию	Описание
`type`	`'text' \| 'password' \| 'email' \| 'number' \| 'tel' \| 'url' \| 'search'`	`'text'`	Нативный `type` поля ввода.
`placeholder`	`string`	`undefined`	Подсказка, отображаемая внутри пустого поля.
`size`	`'sm' \| 'md' \| 'lg'`	`undefined`	Размер поля. Высота `sm`/`md`/`lg` — 2.025/2.55/2.95rem и одинакова у всех полей формы того же размера. Если не задан, берётся из `C3FormField`.
`disabled`	`boolean`	`false`	Отключает поле ввода.
`required`	`boolean`	`false`	Маркер обязательности поля.
`error`	`boolean`	`false`	Признак ошибки — показывает красную рамку.
`name`	`string`	`undefined`	Имя поля для отправки в формах.

v-model привязывает значение поля через defineModel<string>().

События

blur — без payload. Срабатывает при потере фокуса.
focus — без payload. Срабатывает при получении фокуса.

Описание

Компонент C3Input — стандартное текстовое поле ввода с поддержкой различных нативных типов, размеров и состояний. Используется для ввода одной строки текста: имени, электронной почты, пароля, поискового запроса и т. п.

Для двусторонней привязки используйте v-model. Состояния задаются через пропы disabled, required и error.

Дополнительная информация

Слоты отсутствуют — компонент рендерит один нативный <input>.

Компонент интегрируется с C3FormField: инжектит контекст поля, берёт из него id, размер и ошибку, а при монтировании регистрирует геттер значения для валидации.
При ошибке (собственной error или из FormField) добавляется класс c3-input--invalid и атрибут aria-invalid="true".
Атрибут id подставляется из контекста FormField, что связывает поле с подписью через label for.
Внутри C3FormField размер определяется так: сначала берётся собственный проп size поля, а если он не задан — size обёртки. Поэтому <C3FormField size="sm"><C3Input size="lg"/></C3FormField> отрендерит поле размера lg, а <C3FormField size="sm"><C3Input/></C3FormField> — sm.
Input — эталон высоты: sm/md/lg дают 2.025/2.55/2.95rem. Высота задаётся общим миксином c3-control-height(), поэтому Input, InputDate, InputTime, InputMenu, InputNumber, InputTags, Select, SelectMenu, Listbox, ColorPicker, DatePicker, PinInput и InputButton одного размера совпадают по высоте. Иконки и свотчи масштабируются вместе с размером, чтобы не увеличивать поле.
Исключения: Textarea — размер задаёт отступы и шрифт, высота определяется числом строк; FileUpload — размер масштабирует зону загрузки; Switch, Slider и InputRating имеют собственную геометрию.
Поддержка RTL: в стилях используются логические свойства (padding-inline-end, inset-inline-end и т.д.), поэтому отступ под иконку и её позиция переворачиваются вместе с атрибутом dir контейнера. Компоненты ничего не знают про RTL и не выставляют dir — направление наследуется сверху вниз.