Form

Building forms with React Hook Form and Yup.

Integration

Forms are tricky. They are one of the most common things you'll build in a web application, but also one of the most complex.


Terminal
Copy
yarn add react-hook-form @hookform/resolvers yup


Code Editor
Copy
import { useForm, Controller } from 'react-hook-form'
import { yupResolver } from '@hookform/resolvers/yup'
import * as yup from 'yup'
import { TextInput, Button } from '@erudilabs/alma'
type Values = { full_name: string }
 
const schema = yup.object({
  full_name: yup.string().required('Field is required.'),
})
 
const onSubmit = async (values: Values) => {
  const { full_name: fullName } = values
  alert(fullName)
}
 
export const TextInputFormExample = () => {
  const {
    control,
    handleSubmit,
    formState: { isSubmitting, isValid },
  } = useForm<Values>({
    resolver: yupResolver(schema),
    defaultValues: { full_name: '' },
    mode: 'all',
  })
 
  return (
    <form onSubmit={handleSubmit(onSubmit)} className="flex flex-col space-y-4">
      <Controller
        name="full_name"
        control={control}
        render={({ field, formState: { errors } }) => {
          return (
            <TextInput
              {...field}
              errorMessage={errors.full_name?.message}
              label="Full name"
              placeholder="Enter your full name"
            />
          )
        }}
      />
      <Button
        type="submit"
        loading={isSubmitting}
        disabled={!isValid}
        block
        theme="primary"
      >
        Submit
      </Button>
    </form>
  )
}

Component Form

Here is several component form


AmountInput Checkbox Counter Dropdown MobileInput NumberInput Radio TextInput Textarea Toogle
Code Editor
Copy
import { AmountInput } from '@erudilabs/alma'
Code Editor
Copy
import { Checkbox } from '@erudilabs/alma'
Code Editor
Copy
import { Counter } from '@erudilabs/alma'
Code Editor
Copy
import { Dropdown } from '@erudilabs/alma'
Code Editor
Copy
import { MobileInput } from '@erudilabs/alma'
Code Editor
Copy
import { NumberInput } from '@erudilabs/alma'
Code Editor
Copy
import { Radio } from '@erudilabs/alma'
Code Editor
Copy
import { TextInput } from '@erudilabs/alma'
Code Editor
Copy
import { Textarea } from '@erudilabs/alma'
Code Editor
Copy
import { Toogle } from '@erudilabs/alma'