FieldText

Однострочный текстовый input. Базируется на FieldDecorator и @cloud-ru/ds-input-private. Несёт заголовок, подсказку, кнопки очистки и копирования (последняя — только в readonly). Слотов вокруг строки ввода не имеет — для них есть FieldCombo.

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

• Стандартное поле в формах, фильтрах, редакторах настроек.
• Отображение значений только-для-чтения (readonly + автоматическая кнопка копирования).
• Нужен префикс, иконка или кнопка-сегмент:
  • берите FieldCombo.
• Для специфичного поведения поиска (suggest, recent) используйте @cloud-ru/ds-search, не FieldText.

Анатомия

Size (default m)

ValidationState (default default)

Управляет тонировкой acrylic-фона поля и иконкой подсказки. Проп error форсит error.

Background (default true)

Acrylic-фон поля. При background = false поле остаётся без подложки (borderless-вид) — уместно во встроенных/inline-сценариях, где фон даёт окружающий контейнер.

Кнопки очистки и копирования

Постфикс-слот несёт взаимоисключающие кнопки:

• Кнопка очистки (showClearButton, по умолчанию true) появляется при непустом value в редактируемом поле. В disabled и readonly она скрыта — очищать нечего.
• Кнопка копирования (showCopyButton, по умолчанию true) появляется только при readonly и непустом value. После клика иконка на 2 секунды меняется на галочку — подтверждение, что значение скопировано.

Установка

pnpm add @cloud-ru/ds-fields

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

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

Базовое поле

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

export function Basic() {
  const [value, setValue] = useState('');
  return <FieldText label='Имя' hint='Как к вам обращаться' placeholder='Иван' value={value} onChange={setValue} />;
}

Валидация ошибки

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

export function WithError() {
  const [value, setValue] = useState('abc');
  return (
    <FieldText
      label='Email'
      required
      placeholder='user@example.com'
      error={value.includes('@') ? '' : 'Введите корректный email'}
      showHintIcon
      value={value}
      onChange={setValue}
    />
  );
}

Readonly с копированием

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

export function Readonly() {
  return <FieldText label='Token' readonly value='sk-XXXXXXXXXXXXXXXXXXXXXXXX' />;
}

Props

Types

FieldTextProps

FieldLayoutPresets

Related props

FieldLength

InputMode

QuestionTooltipProps

Size

Type

ValidationState

Storybook

Figma