FieldName

Поле ввода имени поверх FieldText с предустановленной yup-валидацией: только латиница, цифры, точка, дефис и подчёркивание; длина до 64 символов; по умолчанию обязательное. Лейбл и подпись подставляются из локали. Доступно в двух вариантах: standalone (FieldName, локальный стейт + onValidationError) и FieldNameRHF (интеграция с react-hook-form через Controller).

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

• Ввод технического имени сущности (сервис, ресурс, ключ) с ограничением на символы и длину.
• В форме на react-hook-form — вариант FieldNameRHF.

Когда не нужен FieldName:

• Произвольный текст без правил валидации — FieldText.
• Многострочное описание — FieldDescription.

Анатомия

Валидация

Встроенная схема (yup):

• символы — ^[a-zA-Z0-9.\-_]*$ (иначе ошибка «недопустимые символы»);
• длина — до maxLength (по умолчанию 64), счётчик показывается при ошибке длины;
• required (по умолчанию true) — ошибка обязательности появляется после blur.

Через customSchema к встроенной схеме конкатенируются дополнительные правила. Так подключают data-зависимые проверки, которые компонент не может выполнить сам — например, уникальность имени по данным потребителя. Текст ошибки для этого случая уже есть в локали пакета (FieldName.errorDuplicate — «Такое название уже существует»):

import { string } from 'yup'
import { fieldsPredefinedLocale } from '@cloud-ru/ds-uikit-product-fields-predefined/locale'

const { t } = fieldsPredefinedLocale.useTranslations()

const uniqueSchema = string().test('unique', t('FieldName.errorDuplicate'), value => !existingNames.includes(value ?? ''))

<FieldName customSchema={uniqueSchema} />

Режимы

• FieldName — локальный стейт, ошибка отдаётся через onValidationError(error).
• FieldNameRHF — controllerProps для react-hook-form; валидация регистрируется как validate в Controller.

Size (default m)

Размер поля наследуется от FieldText: s, m, l.

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

Базовый

import { FieldName } from '@cloud-ru/ds-uikit-product-fields-predefined';
import { useState } from 'react';

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

  return <FieldName value={value} onChange={setValue} />;
}

React Hook Form

import { Button } from '@cloud-ru/ds-button';
import { FieldNameRHF } from '@cloud-ru/ds-uikit-product-fields-predefined';
import { FormProvider, useForm } from 'react-hook-form';

type FormValues = { serviceName: string };

export function FieldNameRHFExample() {
  const methods = useForm<FormValues>({ defaultValues: { serviceName: '' }, mode: 'onBlur' });

  return (
    <FormProvider {...methods}>
      <form
        onSubmit={methods.handleSubmit(values => alert(`name: ${values.serviceName}`))}
        style={{ display: 'flex', flexDirection: 'column', gap: 12, width: 320 }}
      >
        <FieldNameRHF controllerProps={{ name: 'serviceName' }} />
        <Button type='submit' label='Отправить' />
      </form>
    </FormProvider>
  );
}

Props

Types

FieldNameProps

Related props

FieldElementButtonProps

FieldElementSlot

FieldLayoutPresets

FieldLength

QuestionTooltipProps

Size

ValidationState

Адаптивность

autoFocus на mobile выключается (наследуется из @cloud-ru/ds-fields) — автофокус там открывает экранную клавиатуру без действия пользователя. Раскладка читается из AdaptiveProvider (@cloud-ru/ds-adaptive); отдельного пропа layoutType нет. Вернуть автофокус на mobile — пропом layoutPresets:

<FieldName autoFocus layoutPresets={{ mobile: { autoFocus: true } }} />

size от раскладки не зависит — задаётся пропом (по умолчанию m) одинаково на всех раскладках.

Storybook