Textarea

<sf-textarea> — многострочное поле для комментариев, описаний и другого свободного текста. Оно собирает разметку многострочного поля из атрибутов. Для короткого значения в одну строку берите Input.

Пример

<sf-textarea
  name="comment"
  label="Комментарий"
  placeholder="Опишите задачу"
  hint="До 500 символов"
  maxlength="500"
  rows="4">
</sf-textarea>

Применение

Подпись, подсказка и пример ввода

label — видимая подпись поля, hint — постоянное пояснение под ним, placeholder — пример ожидаемого текста. Placeholder исчезает, как только пользователь начинает печатать, поэтому подпись и подсказку он не заменяет. required ставит звёздочку у подписи и делает обязательным нативное поле.

Высота и длина текста

rows задаёт начальную высоту в строках, по умолчанию три. Пользователь может растянуть поле по вертикали. maxlength и minlength ограничивают длину текста средствами браузера; сообщите ограничение в hint, как в примере.

Вид и размер

appearance выбирает вид поля: bordered — с рамкой, filled — с заливкой. size выбирает ступень размерной шкалы: 1/2, 1 или 2; берите ступень остальных полей формы.

Ошибка и только чтение

invalid вместе с error-message показывает ошибку: сообщение встаёт на место подсказки и связывается с полем. readonly оставляет текст доступным для чтения и копирования, disabled выключает поле и исключает его из отправки формы. Вместо строк подсказки и ошибки можно передать разметку в слоты hint и error.

<div class="grid grid-col-1 md:grid-col-2 gap-3 items-cross-start">
  <sf-textarea
    name="reason"
    label="Причина отказа"
    appearance="filled"
    required
    invalid
    error-message="Опишите причину: её увидит автор заявки"
    rows="3">
  </sf-textarea>

  <sf-textarea
    name="history"
    label="Исходный текст"
    value="Заявка принята в работу."
    hint="Поле только для чтения"
    readonly
    rows="3">
  </sf-textarea>
</div>

Значение в форме и события

Внутри <sf-textarea> лежит обычный <textarea> с переданным name, поэтому текст попадает в FormData и отправку формы, а браузер проверяет required и длину перед отправкой. Свойство value элемента читает и задаёт текущий текст.

input приходит при каждом изменении текста, change — когда пользователь покинул изменённое поле. Оба — нативные события внутреннего <textarea>, всплывают через <sf-textarea>, detail у них нет; текст читайте из event.target.value.

const comment = document.querySelector('sf-textarea[name="comment"]');
comment.addEventListener('input', (event) => {
  counter.textContent = `${event.target.value.length} из 500`;
});
comment.value = 'Черновик ответа';

Доступность

• Задайте видимую подпись в label: она связана с полем и даёт ему доступное имя. Один placeholder имени не даёт.
• Подсказка и сообщение об ошибке связаны с полем через aria-describedby; при invalid поле получает aria-invalid и aria-errormessage.
• Поле — обычная остановка Tab; Enter переносит строку, а не отправляет форму.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.

Атрибуты

• size — string, по умолчанию 1, значения: 1/2, 1, 2.
• appearance — string, по умолчанию bordered, значения: bordered, filled. Вид поля: блок с рамкой или с заливкой.
• label — string, по умолчанию пусто.
• required — boolean, по умолчанию false.
• placeholder — string, по умолчанию пусто.
• autocomplete — string, по умолчанию пусто.
• inputmode — string, по умолчанию пусто, значения: пусто, none, text, tel, url, email, numeric, decimal, search.
• minlength — number, по умолчанию null.
• maxlength — number, по умолчанию null.
• spellcheck — boolean, по умолчанию true.
• wrap — string, по умолчанию soft, значения: soft, hard.
• hint — string, по умолчанию пусто.
• value — string, по умолчанию пусто.
• name — string, по умолчанию пусто.
• rows — number, по умолчанию 3.
• disabled — boolean, по умолчанию false.
• readonly — boolean, по умолчанию false.
• error — boolean, по умолчанию false.
• invalid — boolean, по умолчанию false.
• error-message — string, по умолчанию пусто.
• mask — boolean, по умолчанию false.
• mask-pattern — string, по умолчанию пусто.
• mask-options — string, по умолчанию пусто.

Прежние имена:

Методы

• setState(nextState: object) — возвращает boolean. Применяет disabled, error или invalid, errorMessage и value к внутреннему textarea и заново синхронизирует семантику поля; установка value отправляет input. Возвращает false, если textarea не отрисован.

События

Все события приходят на сам элемент и всплывают. Общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

• change — detail не описан. Значение зафиксировано; нативное событие всплывает от внутреннего textarea, который является его целью.
• input — detail не описан. Значение изменилось при вводе; нативное событие всплывает от внутреннего textarea, который является его целью.

Доступность

• Роль: текстовое поле (textbox).
• Доступное имя: обязательно.
• Клавиши: Tab, обычная правка многострочного текста.
• Фокус: Сохраняет видимый фокус на активном элементе управления.

Минимальная разметка

<sf-textarea label="Comment" name="comment" rows="4" maxlength="500"></sf-textarea>

Источник

• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/textarea
• simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-textarea