Textarea#

Компонент ввода многострочного текста

№	Свойство	Описание	Значение по умолчанию
1	onChange	Обработчик события изменения значения поля `((value: string, event: ChangeEvent<HTMLTextAreaElement>) => void)`	-
2	Placeholder	Подсказка внутри поля, если не введен текст (string)	-
3	error	Поле содержит ошибку (boolean)	-
4	disabled	Поле заблокировано для ввода (boolean)	-
5	value	Значение поля (string, number)	-
6	classes	Список классов `Partial<Record<"error" / "disabled" / "focused" / "textarea" / "container" / "textareaContainer", string>>`	-
7	fullWidth	Растянуть компонент на всю ширину контейнера (boolean)	-
8	label	Подпись над полем ввода (ReactNode)	-
9	labelProps	Свойства компонента InputLabel (InputLabelProps)	-
10	helperText	Подпись под полем ввода (ReactNode)	-
11	helperTextProps	Свойства компонента InputHelperText (InputHelperTextProps)	-
12	textareaProps	HTML-атрибуты элемента textarea `TextareaHTMLAttributes<HTMLTextAreaElement>`	-
13	textareaRef	Ссылка на нативный элемент textarea `((instance: HTMLTextAreaElement / null) => void) / MutableRefObject<HTMLTextAreaElement / null> / null`	-
14	rows	Количество строк (number)	3

import { Textarea } from '@v-uik/textarea'

Стандартное поле ввода#

import * as React from 'react'
import { Textarea } from '@v-uik/textarea'

export const Basic = (): React.ReactElement => {
  const [text, setText] = React.useState<string>('')

  const handleAreaChange = (value: string) => {
    setText(value)
  }

  return (
    <Textarea
      label="Краткое описание района"
      helperText="Дополнительное описание района"
      placeholder="Обычный район Москвы"
      textareaProps={{
        'aria-labelledby': 'basic-label',
        'aria-describedby': 'basic-helper',
      }}
      labelProps={{ id: 'basic-label' }}
      helperTextProps={{ id: 'basic-helper' }}
      value={text}
      onChange={handleAreaChange}
    />
  )
}

Поле заблокировано для ввода#

import * as React from 'react'
import { Textarea } from '@v-uik/textarea'

export const Disabled = (): React.ReactElement => {
  return <Textarea disabled value="Нет района лучше чем Царицыно" />
}

Поле содержит ошибку#

import * as React from 'react'
import { Textarea } from '@v-uik/textarea'

export const WithError = (): React.ReactElement => {
  return (
    <Textarea
      error
      label="Краткое описание района"
      helperText="Дополнительное описание района"
      value="Нет района лучше чем Царицыно"
      textareaProps={{
        'aria-labelledby': 'with-error-label',
        'aria-describedby': 'with-error-helper',
        'aria-invalid': true,
      }}
      labelProps={{ id: 'with-error-label' }}
      helperTextProps={{ id: 'with-error-helper' }}
    />
  )
}

Растягивание поля на всю ширину контейнера#

import * as React from 'react'
import { Textarea } from '@v-uik/textarea'

export const FullWidth = (): React.ReactElement => {
  return <Textarea fullWidth value="Обычный район Москвы" />
}

Изменение высоты поля#

В этом примере задается количество строк с помощью свойства rows.

import * as React from 'react'
import { Textarea } from '@v-uik/textarea'

export const WithRows = (): React.ReactElement => {
  return <Textarea rows={10} value="Обычный район Москвы" />
}