Input#

Компонент ввода текста.

import { Input } from '@v-uik/input'
import { InputLabel } from '@v-uik/input-label'
import { InputHelperText } from '@v-uik/input-helper-text'

Input API#

№	Свойство	Описание	Значение по умолчанию
1	classes	Список классов `Partial<Record<"input" / "small" / "prefix" / "disabled" / "container" / "error" / "suffix" / "inputContainer" / "focused" / "large", string>>`	-
2	label	Подпись над полем ввода (ReactNode)	-
3	labelProps	Свойства компонента InputLabel (InputLabelProps)	-
4	helperText	Подпись под полем ввода (ReactNode)	-
5	helperTextProps	Свойства компонента InputHelperText (InputHelperTextProps)	-
6	placeholder	Подсказка внутри поля, если не введен текст (string)	-
7	prefix	Вспомогательный элемент перед полем ввода (ReactNode)	-
8	onChange	Обработчик события изменения значения поля `((value: string, event: ChangeEvent<HTMLInputElement>) => void)`	-
9	disabled	Поле заблокировано для ввода (boolean)	-
10	size	Размер поля: "sm", "md", "lg", "md"	-
11	inputProps	HTML-атрибуты элемента input `InputHTMLAttributes<HTMLInputElement>`	-
12	value	Значение поля string (number)	-
13	inputRef	Ссылка на нативный элемент input `((instance: HTMLInputElement / null) => void) / MutableRefObject<HTMLInputElement / null> / null`	-
14	fullWidth	Растянуть компонент на всю ширину контейнера (boolean)	-
15	error	Поле содержит ошибку (boolean)	-
16	suffix	Вспомогательный элемент после поля ввода (ReactNode)	-
17	showErrorIcon	Показать дополнительную иконку ошибки (boolean)	true
18	errorIconTooltipProps	Свойства компонента Tooltip для иконки ошибки `Pick<TooltipProps, ref, slot, style, title, key, defaultChecked, defaultValue ,suppressContentEditableWarning, suppressHydrationWarning ... 251 more ... "interactive">`	-

InputLabel API#

InputLabel — это sub-компонент отображения label для различных полей ввода, который можно настроить через свойство labelProps.

№	Свойство	Описание	Значение по умолчанию
1	classes	Список классов `Partial<Record<"label" / "disabled" / "tooltipIcon", string>>`	-
2	disabled	Применить стили для disabled состояния boolean	-
3	tooltipText	Текст всплывающей подсказки подписи ReactNode	-
4	tooltipProps	Свойства компонента Tooltip `Pick<TooltipProps, "ref" / "slot" / "style" / "title" / "key" / "defaultChecked" / "defaultValue" / "suppressContentEditableWarning" / "suppressHydrationWarning" / ... 251 more ... / "interactive">`	-

InputHelperText API#

Это sub-компонент отображения вспомогательного текста для различных полей ввода, который можно настроить через свойство helperTextProps.

№	Свойство	Описание	Значение по умолчанию
1	classes	Список классов `Partial<Record<"disabled" / "error" / "helperText", string>>`	-
2	disabled	Применить стили для disabled состояния (boolean)	-
3	error	Применить стили для error состояния (boolean)	-

Поле ввода с ярлыком и описанием#

import * as React from 'react'
import { Input } from '@v-uik/input'

export const InputWithDescription = (): JSX.Element => {
  return (
    <Input
      label="Введите логин"
      helperText="Описание поля"
      inputProps={{ id: 'first-case', 'aria-describedby': 'first-case-helper' }}
      labelProps={{ htmlFor: 'first-case' }}
      helperTextProps={{ id: 'first-case-helper' }}
    />
  )
}

Поле ввода с ярлыком и подсказкой#

import * as React from 'react'
import { Input } from '@v-uik/input'

export const InputWithTooltip = (): JSX.Element => {
  return (
    <Input
      label="Введите логин"
      inputProps={{ id: 'second-case', title: 'Подсказка' }}
      labelProps={{
        htmlFor: 'second-case',
        tooltipText: 'Подсказка',
        tooltipProps: {
          single: true,
          dropdownProps: {
            modifiers: [
              {
                name: 'offset',
                options: {
                  offset: [-5, 8],
                },
              },
            ],
          },
        },
      }}
      onFocus={console.log}
    />
  )
}

Варианты индикации ошибки#

import * as React from 'react'
import { Input } from '@v-uik/input'

export const ErrorIndication = (): JSX.Element => {
  return (
    <>
      <div>
        <Input
          error
          inputProps={{
            id: 'third-case',
            'aria-invalid': 'true',
            'aria-describedby': 'third-case-error',
          }}
          showErrorIcon={false}
          label="Без иконки"
          labelProps={{ htmlFor: 'third-case' }}
          helperText="Поле не может быть пустым"
          helperTextProps={{ id: 'third-case-error' }}
        />
      </div>
      <div>
        <Input
          error
          label="С иконкой"
          helperText="Поле не может быть пустым"
          inputProps={{
            id: 'fourth-case',
            'aria-invalid': 'true',
            'aria-describedby': 'fourth-case-error',
          }}
          labelProps={{ htmlFor: 'fourth-case' }}
          helperTextProps={{ id: 'fourth-case-error' }}
        />
      </div>
      <div>
        <Input
          error
          showErrorIcon
          errorIconTooltipProps={{
            dropdownProps: {
              placement: 'top',
              content: 'Поле не может быть пустым',
            },
          }}
          inputProps={{ id: 'five-case', 'aria-invalid': 'true' }}
          label="С иконкой с подсказкой"
          labelProps={{ htmlFor: 'five-case' }}
        />
      </div>
    </>
  )
}

Поле ввода с иконками в начале и конце#

<Input prefix={<Icon />} suffix={<Icon />} />