# @snack-uikit/input-private

> `npm i @snack-uikit/input-private`

Latest version **5.0.0** (published 2026-09-21) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @snack-uikit/input-private
pnpm add @snack-uikit/input-private
yarn add @snack-uikit/input-private
bun add @snack-uikit/input-private
```

## Health

**Score 65/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 5.0.0 |
| Published | 2026-09-21 |
| First published | 2023-12-05 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 115.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Дмитрий Безматерных |
| Maintainers | yetihead, agrigorii, cloud-ru-tech |

## Links

- npm: https://www.npmjs.com/package/@snack-uikit/input-private
- Repository: https://github.com/cloud-ru-tech/snack-uikit
- Homepage: https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/input-private
- Issues: https://github.com/cloud-ru-tech/snack-uikit/issues
- npm.io page: https://npm.io/package/@snack-uikit/input-private

## Dependencies (3)

- [classnames](https://npm.io/package/classnames.md) ^2.5.1
- [@snack-uikit/icons](https://npm.io/package/@snack-uikit/icons.md) ^1.0.1
- [@snack-uikit/utils](https://npm.io/package/@snack-uikit/utils.md) ^5.0.0

## Recent versions

- 5.0.0 (latest) — 2026-09-21
- 4.8.11-preview-acb79d0b.0 (preview) — 2026-09-21
- 4.8.11-preview-b2e4ed46.0 — 2026-09-21
- 4.8.11-preview-27969f64.0 — 2026-09-21
- 4.8.11-preview-fe85442f.0 — 2026-09-18
- 4.8.11-preview-fc6b5b87.0 — 2026-08-20
- 4.8.10 — 2026-08-07
- 4.8.10-preview-4e8bfebd.0 — 2026-08-07
- 4.8.10-preview-eff3bc02.0 — 2026-08-03
- 4.8.9 — 2026-05-18
- 4.8.8-preview-ea1a9bc3.0 — 2026-03-04
- 4.8.8 — 2026-03-04
- 4.8.7 — 2026-02-18
- 4.8.6 — 2026-01-19
- 4.8.6-preview-d1ce0cc3.0 — 2025-12-01
- … 138 more at https://npm.io/package/@snack-uikit/input-private/versions

## README

# Input Private

## Installation
`npm i @snack-uikit/input-private`

[Changelog](./CHANGELOG.md)

## Description

- Пакет `@snack-uikit/input-private` предоставляет базовый компонент `InputPrivate` для создания полей ввода в составе других компонентов библиотеки (например, `FieldText`, `FieldSecure`, `FieldSelect`).
- Компонент является внутренним (private) и предназначен для использования внутри других пакетов UI Kit, а не напрямую в приложениях.
- `InputPrivate` представляет собой обёртку над нативным HTML-элементом `<input>` с поддержкой всех стандартных атрибутов и событий, а также дополнительных возможностей: различные типы ввода (text, password, number, tel, email, url), режимы работы экранной клавиатуры (inputMode), управление автозаполнением, проверка орфографии и валидация через pattern.
- Пакет также экспортирует вспомогательные хуки (`useButtonNavigation`, `useClearButton`) и утилиты (`moveCursorToEnd`, `selectAll`, `runAfterRerender`, `isCursorInTheBeginning`, `isCursorInTheEnd`) для расширенной работы с полями ввода, включая навигацию по кнопкам с клавиатуры и управление курсором.

## Example

```tsx
import { useState } from 'react';
import { InputPrivate } from '@snack-uikit/input-private';

function Example() {
  const [value, setValue] = useState('');

  return (
    <InputPrivate
      value={value}
      onChange={setValue}
      placeholder="Введите текст"
      type="text"
      inputMode="text"
      maxLength={100}
      autoComplete="off"
    />
  );
}
```

[//]: DOCUMENTATION_SECTION_START
[//]: THIS_SECTION_IS_AUTOGENERATED_PLEASE_DONT_EDIT_IT
## InputPrivate
### Props
| name | type | default value | description |
|------|------|---------------|-------------|
| name | `string` | - | Значение html-атрибута name |
| value | `string` | - | Значение input |
| onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
| placeholder | `string` | - | Значение плейсхолдера |
| id | `string` | - | Значение html-атрибута id |
| className | `string` | - | CSS-класс |
| type | enum Type: `"number"`, `"text"`, `"password"`, `"tel"`, `"email"`, `"url"` | text | Тип инпута |
| inputMode | enum InputMode: `"text"`, `"tel"`, `"email"`, `"url"`, `"decimal"`, `"numeric"`, `"search"`, `"none"` | text | Режим работы экранной клавиатуры |
| disabled | `boolean` | - | Является ли поле деактивированным |
| readonly | `boolean` | - | Является ли поле доступным только для чтения |
| autoComplete | `string \| boolean` | false | Включен ли автокомплит для поля |
| autoFocus | `boolean` | - | Включен ли авто-фокус для поля |
| maxLength | `number` | - | Максимальная длина вводимого значения |
| min | `number` | - | Минимальное значение поля |
| max | `number` | - | Максимальное значение поля |
| step | `string \| number` | - | Максимальное значение поля |
| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
| onKeyDown | `KeyboardEventHandler<HTMLInputElement>` | - | Колбек обработки начала нажатия клавиши клавиатуры |
| onPaste | `ClipboardEventHandler<HTMLInputElement>` | - | Колбек обработки вставки значения |
| tabIndex | `number` | - | Значение атрибута tab-index |
| onClick | `MouseEventHandler<HTMLInputElement>` | - | Колбек обработки клика |
| onMouseDown | `MouseEventHandler<HTMLInputElement>` | - | Колбек обработки нажатия кнопки мыши |
| spellCheck | `boolean` | true | Значение атрибута spellcheck (проверка орфографии) |
| pattern | `string` | - | Регулярное выражение валидного инпута |
| key | `Key` | - |  |
| ref | `LegacyRef<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} |
## useButtonNavigation
`hook` 

Позволяет использовать клавиатуру для навигации по элементам управления
## useClearButton
`hook` 

Позволяет использовать кнопку сброса значения
## moveCursorToEnd
`helper` 

Переносит курсор в конец поля ввода
## selectAll
`helper` 

Выделяет весь текст в поле ввода
## runAfterRerender
`helper` 

Откладывает колбек на следующий цикл EventLoop
## isCursorInTheBeginning
`helper` 

Проверяет находится ли курсор в начале поля ввода
## isCursorInTheEnd
`helper` 

Проверяет находится ли курсор в конце поля ввода


[//]: DOCUMENTATION_SECTION_END

---
_Source: https://npm.io/package/@snack-uikit/input-private · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._