BaseFormInput

Import

import { BaseFormInput } from 'binak-react-components';
import { useForm } from 'react-hook-form';

Props

important

While using this component, you should use register prop to pass React Hook Form register method:

Name	Type	Default Value
id	string	undefined
label	string	undefined
labelPosition	'left' | 'center' | 'right'	'left'
register	UseFormRegisterReturn<any>	undefined
error	sFieldError	undefined
errorMessage	string	undefined
inputType	string	undefined
childrenBefore	ReactNode	undefined
childrenAfter	ReactNode	undefined
childrenWrapperStyle	CSSProperties	{ display: 'flex', gap: '0.5rem', alignItems: 'center' }
...props	div props	-

Example

const {
  register,
  handleSubmit,
  formState: { errors },
} = useForm < CreateLinkForm > { mode: 'onTouched' };

return (
  <BaseCard>
    <form onSubmit={handleSubmit((data) => alert(data.fullname))}>
      <BaseFormInput
        id="fullname"
        label={'Fullname'}
        error={errors.fullname}
        register={register('fullname', {
          required: true,
          maxLength: 30,
          minLength: 5,
        })}
        errorMessage={'Please enter a valid fullname!'}
        childrenBefore={
          <img
            src={logoImage}
            alt=""
            style={{ height: '2rem', width: 'auto', margin: 0 }}
          />
        }
        childrenAfter={
          <BaseButton mode="text" onClick={() => reset({ fullname: '' })}>
            Clear
          </BaseButton>
        }
      />
      <BaseWrapper mode={['align-right']}>
        <BaseButton type="submit">Submit</BaseButton>
      </BaseWrapper>
    </form>
  </BaseCard>
);