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" />

Валидация

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

Текст

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',
      }}
    />
  }
  onIconClick={() => alert('Custom click handler')}
/>
<TextField
  customIcon={
    <CustomIcon
      style={{
        width: '32',
        height: '32',
        display: 'block',
        userSelect: 'none',
      }}
    />
  }
  onIconClick={() => alert('Custom click handler')}
/>

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

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

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

Текст

<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="Иванов Иван Иванович" />

Счетчик введенных графем

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

Текст

2/10

Текст

9/10

<TextField symbolCounter={10} textarea graphemesCounter value="😀👩‍💻" />
<TextField symbolCounter={10} textarea graphemesCounter value="⏏️ ▶️ ⏸ ⏯ ⏹" />

<TextField symbolCounter={10} textarea graphemesCounter value="😀👩‍💻" />
<TextField symbolCounter={10} textarea graphemesCounter 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" />