让开源，少一点语言距离。
npm包中文文档

@cloud-ru/ds-input-private

中文文档
1.0.16发布于 2026/11/11Apache-2.0TypeScriptESM + CJS近 30 天下载 1.2万

Базовая обёртка <input> с состояниями, иконками, кнопкой очистки и счётчиком — фундамент для публичных полей ввода (Search, FieldText и пр.).

原始使用文档
中文原文
文档目录7 节
  1. Когда использовать
  2. Установка
  3. Props
  4. InputPrivate
  5. useButtonNavigation
  6. useClearButton
  7. Смотри также

InputPrivate

@cloud-ru/ds-input-private — Базовая обёртка <input> с состояниями, иконками, кнопкой очистки и счётчиком — фундамент для публичных полей ввода (Search, FieldText и пр.).

@cloud-ru/ds-input-private — внутренний строительный блок для полей ввода. Реализует общую визуальную обвязку: рамка по состоянию (focus / disabled / readonly / error), слоты под иконку, prefix/suffix, кнопку очистки и счётчик символов. Прямого применения в продуктовом коде не имеет — используйте публичные пакеты (@cloud-ru/ds-search, доменные поля), которые композируются поверх него.

Когда использовать

  • Создаёте новый публичный input-компонент и хотите получить готовое поведение состояний и слотов.
  • Реализуете кастомный фильтр / автокомплит и нужна та же обвязка, что у Search.

В продуктовом коде не импортируйте напрямую — берите публичный компонент.

Установка

pnpm add @cloud-ru/ds-input-private

import { InputPrivate, useClearButton, useButtonNavigation } from '@cloud-ru/ds-input-private'

Props

InputPrivate

InputPrivateProps

PropTypeDefaultDescription
autoCompletestring | booleanfalseВключен ли автокомплит для поля
autoFocusbooleanfalseВключен ли авто-фокус для поля
classNamestring—CSS-класс
data-test-idstring—
disabledbooleanfalseЯвляется ли поле деактивированным
idstring—Значение html-атрибута id
inputMode"decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"textРежим работы экранной клавиатуры
maxnumber—Максимальное значение поля
maxLengthnumber—Максимальная длина вводимого значения
minnumber—Минимальное значение поля
namestring—Значение html-атрибута name
onBlurFocusEventHandler<HTMLInputElement>—Колбек обработки потери фокуса
onChange((value: string, e?: ChangeEvent<HTMLInputElement>) => void)—Колбек смены значения
onClickMouseEventHandler<HTMLInputElement>—Колбек обработки клика
onFocusFocusEventHandler<HTMLInputElement>—Колбек обработки получения фокуса
onKeyDownKeyboardEventHandler<HTMLInputElement>—Колбек обработки начала нажатия клавиши клавиатуры
onMouseDownMouseEventHandler<HTMLInputElement>—Колбек обработки нажатия кнопки мыши
onPasteClipboardEventHandler<HTMLInputElement>—Колбек обработки вставки значения
patternstring—Регулярное выражение валидного инпута
placeholderstring—Значение плейсхолдера
readonlybooleanfalseЯвляется ли поле доступным только для чтения
spellCheckbooleantrueЗначение атрибута spellcheck (проверка орфографии)
stepstring | number—Максимальное значение поля
tabIndexnumber0Значение атрибута tab-index
type"email" | "number" | "password" | "tel" | "text" | "url"textТип инпута
valuestring``Значение input

  • InputMode = "decimal" | "email" | "none" | "numeric" | "search" | "tel" | "text" | "url"

  • Type = "email" | "number" | "password" | "tel" | "text" | "url"

useButtonNavigation

UseButtonNavigationProps

PropTypeDefaultDescription
inputRefRefObject<T | null>—
onButtonKeyDownKeyboardEventHandler<HTMLButtonElement>() => {}
postfixButtonsActiveItem | ButtonProps | InactiveItem—
prefixButtonsActiveItem | ButtonProps | InactiveItem[]
readonlyboolean—
setInputFocus(() => void)() => focusWithoutScroll(inputRef.current)
submitKeysstring[]—

ActiveItem

PropTypeDefaultDescription
activetrue—
idstring—
refButtonRef—
render(props: RenderActiveButtonProps) => ReactElement—
showboolean—

  • ButtonProps = InactiveItem | ActiveItem

  • ButtonRef = RefObject<HTMLButtonElement | null>

InactiveItem

PropTypeDefaultDescription
activefalse—
idstring—
render(props: RenderInactiveButtonProps) => ReactElement—
showboolean—

useClearButton

UseClearButtonProps

PropTypeDefaultDescription
clearButtonRefRefObject<HTMLButtonElement | null>—
dataTestIdstringbutton-clear-valuedata-test-id кнопки. Переопределяется полем, когда у него свой публичный id слота.
disabledboolean—
onClearMouseEventHandler<HTMLButtonElement>—
onDownMouseEventHandler<HTMLButtonElement>—
showClearButtonboolean—
size"l" | "m" | "s"—
  • Size = "l" | "m" | "s"

Смотри также

  • Search, SearchPrivate — публичные потребители.

版本与发布记录

@cloud-ru/ds-input-private 共发布 63 个版本，首次发布于 2026/08/18；过去 12 个月发布了 63 个版本。

版本发布日期距今
1.0.16latest2026/11/11今天
1.0.16-preview-e8fe6b56.0preview2026/11/11今天
1.0.16-preview-c0e895ed.02026/11/11今天
1.0.16-preview-90b10112.02026/11/11今天
1.0.16-preview-fd7dd437.02026/11/101 天前
1.0.16-preview-9a75a2a9.02026/11/101 天前

关于 @cloud-ru/ds-input-private 的常见问题

@cloud-ru/ds-input-private 是什么？

Базовая обёртка <input> с состояниями, иконками, кнопкой очистки и счётчиком — фундамент для публичных полей ввода (Search, FieldText и пр.).

如何安装 @cloud-ru/ds-input-private？

在项目目录运行 npm install @cloud-ru/ds-input-private，或使用 pnpm add / yarn add / bun add。

@cloud-ru/ds-input-private 支持 TypeScript 吗？

支持。包内自带 TypeScript 类型声明（package.json 声明了 types 入口），安装后即可获得类型提示，无需再安装 @types 包。

@cloud-ru/ds-input-private 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require() 都可以使用，打包工具会自动选择合适的版本。

@cloud-ru/ds-input-private 可以商用吗？

@cloud-ru/ds-input-private 使用 Apache-2.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

@cloud-ru/ds-input-private 的下载量有多少？

根据 npm 官方下载统计，@cloud-ru/ds-input-private 在 2026/10/10 – 2026/11/08 这 30 天内被下载 11,655 次，日均约 389 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

@cloud-ru/ds-input-private 还在维护吗？

最新版本 1.0.16 发布于 2026/11/11（今天）；至今共发布 63 个版本，其中过去 12 个月发布了 63 个；首次发布于 2026/08/18。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。