Простейшие компоненты ввода TextArea и TextInput
About
Суть в отсутствии каких-либо "лишних стилей", что позволяет без проблем настраивать под любой проект.
export type BaseInputProps = {
/**
* подпись к инпуту
*/
label?: string;
/**
* отображать поле как обязательное (красная звездочка)
*/
showRequired?: boolean;
/**
* уникальный id для label
*/
labelId?: string;
}
Пример
export const TextBoxForm = () => {
const {
register,
handleSubmit,
} = useForm<TestUser>({
mode: 'onBlur',
reValidateMode: 'onChange',
});
function onSubmit(data: TestUser) {
alert(data);
}
return (
<form
action="#"
onSubmit={handleSubmit(onSubmit)}
className={'test-form'}
>
<div
className={'test-form__wrapper'}
>
<TextBox
label={'Name:'}
{...register('name', nameValidation)}
/>
<TextBox
label={'Age:'}
{...register('age', ageValidation)}
/>
</div>
<button className={'test-form__submit'}>
Submit
</button>
</form>
);
};