TextField

import { TextField } from '@megafon/ui-core';

Примеры и код
Свойства и методы

Поле для ввода пароля

Пароль

<TextField name="password" type="password" />

<TextField name="password" type="password" />

Обязательное поле

Телефон*

<TextField name="phone" required label="Телефон" />

<TextField name="phone" required label="Телефон" />

C иконкой очистки значения и без неё

Имя

<TextField name="name" label="Имя" value="Константин" />

<TextField name="name" label="Имя" value="Константин" />

Имя

<TextField name="name" label="Имя" value="Константин" hideIcon />

<TextField name="name" label="Имя" value="Константин" hideIcon />

Отключено отображение плейсхолдера

При установке фокуса на поле - плейсхолдер не отображается

Введите текст

<TextField hidePlaceholder label="Введите текст" />

<TextField hidePlaceholder label="Введите текст" />

Поле для ввода телефона

Типы масок:

Обычная

С автозаполнением

С перехватом вводимого значения

В данном случае, при вставке телефона в формате +79998887766 выведет его сразу в нужном формате, за счет совпадения начальных символов маски и вставляемого значения, в остальных кейсах нужна обработка значения внутри коллбека и его возврат оттуда

<div style={{ display: 'grid', gap: '35px' }}>
  <TextField
    placeholder="+7 (999) 999-99-99"
    mask="+7 (999) 999-99-99"
    maskchar="_"
    label="Обычная"
    id="2"
    inputMode="numeric"
    classes={{ input: 'parent__inputClass' }}
    style={{ width: '350px' }}
  />
  <TextField
    mask="+7 (999) 999-99-99"
    maskchar="_"
    type="tel"
    autoComplete="tel"
    inputMode="tel"
    label="С автозаполнением"
    style={{ width: '350px' }}
  />
  <div>
    <DemoTextFieldWithBeforeMaskChangeValue>
      {({ handleBeforeMaskChange }) => (
        <TextField
          onBeforeMaskChange={handleBeforeMaskChange}
          mask="+7 (999) 999-99-99"
          maskchar="_"
          label="С перехватом вводимого значения"
          style={{ width: '350px' }}
        />
      )}
    </DemoTextFieldWithBeforeMaskChangeValue>
    <p>
      В данном случае, при вставке телефона в формате +79998887766 выведет его
      сразу в нужном формате, за счет совпадения начальных символов маски и
      вставляемого значения, в остальных кейсах нужна обработка значения
      внутри коллбека и его возврат оттуда
    </p>
  </div>
</div>

<div style={{ display: 'grid', gap: '35px' }}>
  <TextField
    placeholder="+7 (999) 999-99-99"
    mask="+7 (999) 999-99-99"
    maskchar="_"
    label="Обычная"
    id="2"
    inputMode="numeric"
    classes={{ input: 'parent__inputClass' }}
    style={{ width: '350px' }}
  />
  <TextField
    mask="+7 (999) 999-99-99"
    maskchar="_"
    type="tel"
    autoComplete="tel"
    inputMode="tel"
    label="С автозаполнением"
    style={{ width: '350px' }}
  />
  <div>
    <DemoTextFieldWithBeforeMaskChangeValue>
      {({ handleBeforeMaskChange }) => (
        <TextField
          onBeforeMaskChange={handleBeforeMaskChange}
          mask="+7 (999) 999-99-99"
          maskchar="_"
          label="С перехватом вводимого значения"
          style={{ width: '350px' }}
        />
      )}
    </DemoTextFieldWithBeforeMaskChangeValue>
    <p>
      В данном случае, при вставке телефона в формате +79998887766 выведет его
      сразу в нужном формате, за счет совпадения начальных символов маски и
      вставляемого значения, в остальных кейсах нужна обработка значения
      внутри коллбека и его возврат оттуда
    </p>
  </div>
</div>

Код DemoTextFieldWithBeforeMaskChangeValueexport const DemoTextFieldWithBeforeMaskChangeValue = ({ children }) => {
    const handleBeforeMaskChange = (value, newState) => {
        const { value: newMaskedValue } = newState;
        const isValuePasted = value && value.length > 1;
        return { ...newState, value: isValuePasted ? value : newMaskedValue };
    };
    return <>{children({ handleBeforeMaskChange })}</>;
};

Подпись снизу

Текст

Comment

<TextField noticeText="Comment" />

<TextField noticeText="Comment" />

Валидация

Клик по "крестику" очищает поле по умолчанию. Если установлены кастомная иконка и onCustomIconClick, то очищение перестает работать.

Текст

Name is required

Текст

You can write that field value is correct

<TextField verification="error" noticeText="Name is required" />
<TextField
  verification="valid"
  noticeText="You can write that field value is correct"
/>

<TextField verification="error" noticeText="Name is required" />
<TextField
  verification="valid"
  noticeText="You can write that field value is correct"
/>

Иконка с обработчиком клика

Текст

Error notice

Текст

<TextField
  verification="error"
  noticeText="Error notice"
  customIcon={
    <CustomIcon
      style={{
        width: '32',
        height: '32',
        display: 'block',
        userSelect: 'none',
      }}
    />
  }
  onCustomIconClick={() => alert('Custom click handler')}
/>
<TextField
  customIcon={
    <CustomIcon
      style={{
        width: '32',
        height: '32',
        display: 'block',
        userSelect: 'none',
      }}
    />
  }
  onCustomIconClick={() => alert('Custom click handler')}
/>

<TextField
  verification="error"
  noticeText="Error notice"
  customIcon={
    <CustomIcon
      style={{
        width: '32',
        height: '32',
        display: 'block',
        userSelect: 'none',
      }}
    />
  }
  onCustomIconClick={() => alert('Custom click handler')}
/>
<TextField
  customIcon={
    <CustomIcon
      style={{
        width: '32',
        height: '32',
        display: 'block',
        userSelect: 'none',
      }}
    />
  }
  onCustomIconClick={() => alert('Custom click handler')}
/>

Ограничение длины текста

Текст

<TextField maxLength={10} />

<TextField maxLength={10} />

Поле отключено для редактирования

Текст

<TextField disabled={true} />

<TextField disabled={true} />

Контролируемое состояние

Текст

<TextField value="initial value" isControlled={true} />

<TextField value="initial value" isControlled={true} />

Контролируемое состояние с вводом только цифр

В данном состоянии компонент полностью контролируется родительским, в том числе очистка поля ввода путем клика на иконку, для нее следует использовать коллбек onCustomIconClick

Текст

<DemoTextFieldWithControlledValue>
  {({ value, onChange }) => (
    <TextField value={value} onChange={onChange} isControlled={true} />
  )}
</DemoTextFieldWithControlledValue>

<DemoTextFieldWithControlledValue>
  {({ value, onChange }) => (
    <TextField value={value} onChange={onChange} isControlled={true} />
  )}
</DemoTextFieldWithControlledValue>

Цветовые схемы

Текст

Тема для светлого фона (по умолчанию)

Текст

Светлая тема для цветного фона

<div style={{ display: 'flex', gap: '35px' }}>
  <div style={{ flex: 1, padding: '10px' }}>
    <TextField
      verification="valid"
      noticeText="Тема для светлого фона (по умолчанию)"
    />
  </div>
  <div style={{ flex: 1, padding: '10px', backgroundColor: '#00B956' }}>
    <TextField
      verification="valid"
      noticeText="Светлая тема для цветного фона"
      theme="white"
    />
  </div>
</div>

<div style={{ display: 'flex', gap: '35px' }}>
  <div style={{ flex: 1, padding: '10px' }}>
    <TextField
      verification="valid"
      noticeText="Тема для светлого фона (по умолчанию)"
    />
  </div>
  <div style={{ flex: 1, padding: '10px', backgroundColor: '#00B956' }}>
    <TextField
      verification="valid"
      noticeText="Светлая тема для цветного фона"
      theme="white"
    />
  </div>
</div>

Код DemoControlledTextFieldexport const DemoTextFieldWithControlledValue = ({ children }) => {
    const [inputValue, setInputValue] = useState('');
    const handleChange = ({ target: { value } }) => {
        const valueDigits = value.replace(/[^0-9]/g, '');
        setInputValue(valueDigits);
    };
    return <>{children({ value: inputValue, onChange: handleChange })}</>;
};

Textarea

Пропс textarea, выставленный в значение true, изменяет компонент в textarea.

Базовое использование

placeholder

<TextField name="name" textarea placeholder="placeholder" />

<TextField name="name" textarea placeholder="placeholder" />

Тип flexible с возможностью растягивать поле по высоте

Поле автоматически увеличивается при вводе текста до высоты шести строк. Режим автоматического увеличения высоты отключается при ручном ресайзе поля.

Текст

<TextField name="name" textarea="flexible" />

<TextField name="name" textarea="flexible" />

Отключение возможности ручного ресайза для textarea с типом flexible

Текст

<TextField textarea="flexible" hideResizeButton />

<TextField textarea="flexible" hideResizeButton />

Обязательное поле

Required field*

<TextField
  label="Required field"
  textarea
  required
  classes={{ input: 'parent__inputClass' }}
/>

<TextField
  label="Required field"
  textarea
  required
  classes={{ input: 'parent__inputClass' }}
/>

Подпись снизу

Текст

Comment

<TextField noticeText="Comment" textarea />

<TextField noticeText="Comment" textarea />

Валидация

Текст

Name is required

Текст

Field passed validation

<TextField verification="error" noticeText="Name is required" textarea />
<TextField
  verification="valid"
  noticeText="Field passed validation"
  textarea
/>

<TextField verification="error" noticeText="Name is required" textarea />
<TextField
  verification="valid"
  noticeText="Field passed validation"
  textarea
/>

Максимальное количество текста

Текст

<TextField maxLength={10} textarea isControlled={false} />

<TextField maxLength={10} textarea isControlled={false} />

Счетчик введенных символов

При превышении переданного количества поле становится невалидным.

Текст

10/10

Текст

20/10

<TextField symbolCounter={10} textarea value="Иванов Ива" />
<TextField symbolCounter={10} textarea value="Иванов Иван Иванович" />

<TextField symbolCounter={10} textarea value="Иванов Ива" />
<TextField symbolCounter={10} textarea value="Иванов Иван Иванович" />

Минимальная высота textarea равна одной строке

По умолчанию минимальная высота равна трем строкам

fixed

flexible

<TextField textarea minTextareaHeight={24} label="fixed" />
<TextField textarea="flexible" minTextareaHeight={24} label="flexible" />

<TextField textarea minTextareaHeight={24} label="fixed" />
<TextField textarea="flexible" minTextareaHeight={24} label="flexible" />

Отключение перевода строки по нажатию Enter

Остается доступен перевод строки по нажатию комбинации Shift + Enter и автоматический

fixed

flexible

<TextField textarea label="fixed" disableEnterLineBreak />
<TextField textarea="flexible" label="flexible" disableEnterLineBreak />

<TextField textarea label="fixed" disableEnterLineBreak />
<TextField textarea="flexible" label="flexible" disableEnterLineBreak />

Поле отключено для редактирования

Текст

<TextField disabled textarea value="disabled" />

<TextField disabled textarea value="disabled" />