FieldSecure

Поле для секретов: пароли, токены, API-ключи. Базируется на FieldDecorator и @cloud-ru/ds-input-private. Кнопка «глаз» переключает <input type> между password и text. В режиме readonly дополнительно появляется кнопка копирования.

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

• Логин/регистрация: ввод и подтверждение пароля.
• Настройки безопасности: смена пароля, выдача API-ключей.
• Отображение access-token / API key (readonly + копирование).

Анатомия

Size (default m)

ValidationState (default default)

Через проп error форсится error. Иконка слева от подсказки появляется при showHintIcon.

Видимость значения (default hidden)

Кнопка «глаз» переключает <input type> между password и text.

• Uncontrolled — hidden не задан, компонент сам хранит состояние маскирования, по умолчанию значение скрыто.
• Controlled — hidden + onHiddenChange под управлением потребителя.

После переключения фокус и каретка возвращаются в поле ввода (каретка — в конец значения), чтобы редактирование продолжалось без лишнего клика.

Слоты и кнопки

• showHideButton (default true) — кнопка «глаз». Скрывается, когда readonly и значение пустое.
• showCopyButton (default true) — кнопка копирования. Видна только при readonly и непустом значении; после копирования иконка кратковременно меняется на галочку.
• asyncValueGetter — ленивая загрузка секрета. Вызывается перед первым раскрытием или копированием; во время запроса показан Skeleton, результат передаётся через onChange. После успешной загрузки значение считается полученным и повторно не запрашивается.

Установка

pnpm add @cloud-ru/ds-fields

import { FieldSecure } from '@cloud-ru/ds-fields'

Примеры использования

Базовое поле пароля

import { FieldSecure } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function Secure() {
  const [value, setValue] = useState('');
  return (
    <FieldSecure
      label='Пароль'
      required
      placeholder='Минимум 8 символов'
      hint='Не передавайте пароль третьим лицам'
      showHintIcon
      value={value}
      onChange={setValue}
    />
  );
}

Управляемая видимость

import { FieldSecure } from '@cloud-ru/ds-fields';
import { useState } from 'react';

export function SecureControlledVisibility() {
  const [value, setValue] = useState('');
  const [hidden, setHidden] = useState(true);
  return (
    <FieldSecure
      label='Пароль'
      hint={hidden ? 'Значение скрыто' : 'Значение видно'}
      value={value}
      onChange={setValue}
      hidden={hidden}
      onHiddenChange={setHidden}
    />
  );
}

Readonly + копирование

import { FieldSecure } from '@cloud-ru/ds-fields';

export function SecureReadonly() {
  return <FieldSecure label='API Token' readonly defaultValue='sk-XXXXXXXXXXXXXXXXXXXXXXXX' />;
}

Async-загрузка значения

import { FieldSecure } from '@cloud-ru/ds-fields';
import { useState } from 'react';

const fakeFetch = (): Promise<string> =>
  new Promise(resolve => setTimeout(() => resolve('sk-FETCHED-TOKEN-FROM-SERVER'), 800));

export function SecureAsync() {
  const [value, setValue] = useState('');
  return (
    <FieldSecure
      label='API Token'
      readonly
      hint='Значение подгружается при клике «глаз» или «копировать»'
      asyncValueGetter={fakeFetch}
      value={value}
      onChange={setValue}
    />
  );
}

Props

Types

FieldSecureProps

Related props

FieldLength

InputMode

QuestionTooltipProps

Size

ValidationState

Storybook

Figma