Простейшие компоненты ввода TextArea и TextInput

Repository

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>
    );
};