website/sdds-serv-docs/docs/components/CodeInput.mdx - dev - sdds/plasma

website/sdds-serv-docs/docs/components/CodeInput.mdx
123 строки5 KB
Ilya
feat(new-hope): fix media request
25 июн 2025, 09:17
25 июн 2025, 09:174c600d8
---
id: CodeInput
title: CodeInput
---

import { PropsTable, Description } from '@site/src/components';

# CodeInput
Компонент `CodeInput` используется для ввода OTP-кодов.

<Description name="CodeInput" />
<PropsTable name="CodeInput" />

## Примеры

### Размер
Размер задается с помощью свойства `size`. 
Ширина компонента так же может регулироваться при помощи свойства `width`:

```tsx live
import React from 'react';
import { CodeInput } from '@salutejs/sdds-serv';

export function App() {
    return (
        <div style={{ flexDirection: 'column', gap: '2rem' }}>
            <CodeInput
                size="l"
                caption="Осталось попыток: 4"
                captionAlign="center"
            />
            <CodeInput
                size="m"
                caption="Чтобы выслать вам код повторно подождите: 20 секунд"
                captionAlign="left"
            />
            <CodeInput 
                size="s"
                caption="Не передавайте никому код из СМС. Иначе ваш аккаунт могут взломать"
                captionAlign="center"
            />
        </div>
    );
}
```

### Допустимые символы и поведение ячейки при вводе некорректного символа
За допустимые символы для ввода отвечает свойство `allowedSymbols`. Задается строкой или регулярным выражением.
Библиотека экспортирует наиболее используемые вариации допустимых символов:
`import { ONLY_DIGITS_PATTERN, ONLY_CHARS_PATTERN, ONLY_DIGITS_AND_CHARS_PATTERN } from '@salutejs/sdds-serv';`

Поведение ячейки при вводе некорректного символа регулируется свойством `itemErrorBehavior`:

```tsx live
import React from 'react';
import { CodeInput } from '@salutejs/sdds-serv';

export function App() {
    return (
        <div>
            <CodeInput itemErrorBehavior="remove-symbol" />
            <CodeInput itemErrorBehavior="keep" />
            <CodeInput itemErrorBehavior="forbid-enter" />
        </div>
    );
}
```

### Поведение компонента при вводе некорректного кода и индикация ошибки
При заполнении всех полей ввода срабатывает колбэк `onFullCodeEnter`. 
При неверном вводе кода, поведние компонента управляется с помощью свойства `codeErrorBehavior`. 
Индикация ошибки происходит с помощью флага `isError` и колбека `setIsError`:

```tsx live
import React, { useState, useRef, Dispatch, SetStateAction } from 'react';
import { CodeInput } from '@salutejs/sdds-serv';

export function App() {
    const [disabledFirst, setDisabledFirst] = useState(false);
    const [isErrorFirst, setIsErrorFirst] = useState(false);
    
    const [disabledSecond, setDisabledSecond] = useState(false);
    const [isErrorSecond, setIsErrorSecond] = useState(false);

    const onFullCodeEnter = (
        code: string,
        errorSetter: Dispatch<SetStateAction<boolean>>,
        disableSetter: Dispatch<SetStateAction<boolean>>
    ) => {
        disableSetter(true);

        // имитация запроса на сервер
        setTimeout(() => {
            disableSetter(false);

            if (code !== '123456') {
                errorSetter(true);
            }
        }, 3000)
    }

    return (
        <div style={{ flexDirection: 'column', gap: '2rem' }}>
            <CodeInput
                itemErrorBehavior="remove-symbol"
                codeErrorBehavior="remove-code"
                disabled={disabledFirst}
                isError={isErrorFirst}
                setIsError={setIsErrorFirst}
                onFullCodeEnter={(code) => onFullCodeEnter(code, setIsErrorFirst, setDisabledFirst)}
            />
            <CodeInput
                itemErrorBehavior="remove-symbol"
                codeErrorBehavior="keep"
                disabled={disabledSecond}
                isError={isErrorSecond}
                setIsError={setIsErrorSecond}
                onFullCodeEnter={(code) => onFullCodeEnter(code, setIsErrorSecond, setDisabledSecond)}
            />
        </div>
    );
}
```