Input
Однострочное поле ввода с дополнениями.
Input.Control получает строковое value и onChange(value, event); дополнения ставятся через Input.LeftAddon и Input.RightAddon.
Живой пример
Настройки примера
Использование
'use client';
import { Input } from '@prosazhin/pbcomponents';
import { useState } from 'react';
function Example() {
const [value, setValue] = useState('');
return (
<Input>
<Input.Control
value={value}
onChange={setValue}
placeholder='Placeholder'
/>
</Input>
);
}API компонента
Составные части: Input.Control, Input.LeftAddon, Input.RightAddon.
| Prop | Тип / варианты | Назначение | По умолчанию |
|---|---|---|---|
size | 's' | 'm's · m | Размер компонента. | m |
disabled | boolean | Блокирует взаимодействие. | false |
error | boolean | Показывает состояние ошибки. | false |
Input.Control.placeholder | string | Подсказка в пустом поле. | — |
Input.Control.value | string | Текущее значение управляемого компонента. | — |
Input.Control.onChange | (value: string, event: InputEvent) => void | Сообщает новую строку и событие ввода. | — |
className | string | Класс корневого элемента. | — |
wrapperClassName | string | Класс внешней обёртки. | — |
Input.Control.type | HTML input typetext · number · email · password · url · tel · search · date · datetime-local · month · week · time | Тип поля: text, email, password и другие нативные типы. | text |
Input.Control.leftIcon | SvgTypenone · check · search · user | Иконка перед текстом; принимает SVG-компонент. | — |
Input.Control.rightIcon | SvgTypenone · check · search · user | Иконка после текста; принимает SVG-компонент. | — |
Input.Control.leftIconClassName | string | Класс левой иконки. | — |
Input.Control.rightIconClassName | string | Класс правой иконки. | — |
Input.Control.textClassName | string | Класс текстовой части. | — |
Нативные HTML-атрибуты поддерживаются там, где компонент рендерит соответствующий элемент. Параметры className управляют только оформлением.