Command Palette

Search for a command to run...

Building forms with React Hook Form and Zod.

Form

This is your public display name.

import { useForm } from "react-hook-form";import { Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "@/components/optics/form";import { Input } from "@/components/optics/input";import { Button } from "@/components/optics/button";const form = useForm({	defaultValues: {		username: "",	},});function onSubmit(data) {	console.log(data);}<Form  clearErrors={clearErrors}  control={{    _defaultValues: {      username: ''    },    _disableForm: _disableForm,    _fields: {},    _focusError: ao,    _formState: {      dirtyFields: {},      disabled: false,      errors: {},      isDirty: false,      isLoading: false,      isReady: false,      isSubmitSuccessful: false,      isSubmitted: false,      isSubmitting: false,      isValid: false,      isValidating: false,      submitCount: 0,      touchedFields: {},      validatingFields: {}    },    _formValues: {      username: ''    },    _getDirty: Q,    _getFieldArray: _getFieldArray,    _getWatch: R,    _names: {      array: {},      disabled: {},      mount: {},      unMount: {},      watch: {}    },    _options: {      defaultValues: {        username: ''      },      mode: 'onSubmit',      reValidateMode: 'onChange',      shouldFocusError: true    },    _proxyFormState: {      dirtyFields: false,      errors: false,      isDirty: false,      isValid: false,      isValidating: false,      touchedFields: false,      validatingFields: false    },    _removeUnmounted: _removeUnmounted,    _reset: aq,    _resetDefaultValues: _resetDefaultValues,    _runSchema: M,    _setDisabledField: am,    _setErrors: _setErrors,    _setFieldArray: _setFieldArray,    _setValid: z,    _state: {      action: false,      mount: false,      watch: false    },    _subjects: {      array: {        next: next,        observers: [],        subscribe: subscribe,        unsubscribe: unsubscribe      },      state: {        next: next,        observers: [],        subscribe: subscribe,        unsubscribe: unsubscribe      }    },    _subscribe: ak,    getFieldState: ai,    handleSubmit: ap,    register: an,    setError: aj,    unregister: al  }}  formState={{    defaultValues: {      username: ''    }  }}  getFieldState={ai}  getValues={ah}  handleSubmit={ap}  register={an}  reset={ar}  resetField={resetField}  setError={aj}  setFocus={setFocus}  setValue={Y}  subscribe={subscribe}  trigger={ag}  unregister={al}  watch={watch}>  <form    className="space-y-8 w-full max-w-md"    onSubmit={async c=>{let d;c&&(c.preventDefault&&c.preventDefault(),c.persist&&c.persist());let e=h(r);if(x.state.next({isSubmitting:!0}),k.resolver){let{errors:a,values:b}=await M();o.errors=a,e=h(b)}else await P(p);if(t.disabled.size)for(let a of t.disabled)L(e,a);if(L(o.errors,"root"),I(o.errors)){x.state.next({errors:{}});try{await a(e,c)}catch(a){d=a}}else b&&await b({...o.errors},c),ao(),setTimeout(ao);if(x.state.next({isSubmitted:!0,isSubmitting:!1,isSubmitSuccessful:I(o.errors)&&!d,submitCount:o.submitCount+1,errors:o.errors}),d)throw d}}  >    <FormField      control={{        _defaultValues: {          username: ''        },        _disableForm: _disableForm,        _fields: {},        _focusError: ao,        _formState: {          dirtyFields: {},          disabled: false,          errors: {},          isDirty: false,          isLoading: false,          isReady: false,          isSubmitSuccessful: false,          isSubmitted: false,          isSubmitting: false,          isValid: false,          isValidating: false,          submitCount: 0,          touchedFields: {},          validatingFields: {}        },        _formValues: {          username: ''        },        _getDirty: Q,        _getFieldArray: _getFieldArray,        _getWatch: R,        _names: {          array: {},          disabled: {},          mount: {},          unMount: {},          watch: {}        },        _options: {          defaultValues: {            username: ''          },          mode: 'onSubmit',          reValidateMode: 'onChange',          shouldFocusError: true        },        _proxyFormState: {          defaultValues: 'all',          dirtyFields: false,          errors: false,          isDirty: false,          isValid: false,          isValidating: false,          touchedFields: false,          validatingFields: false        },        _removeUnmounted: _removeUnmounted,        _reset: aq,        _resetDefaultValues: _resetDefaultValues,        _runSchema: M,        _setDisabledField: am,        _setErrors: _setErrors,        _setFieldArray: _setFieldArray,        _setValid: z,        _state: {          action: false,          mount: false,          watch: false        },        _subjects: {          array: {            next: next,            observers: [],            subscribe: subscribe,            unsubscribe: unsubscribe          },          state: {            next: next,            observers: [],            subscribe: subscribe,            unsubscribe: unsubscribe          }        },        _subscribe: ak,        getFieldState: ai,        handleSubmit: ap,        register: an,        setError: aj,        unregister: al      }}      name="username"      render={render}    />    <Button      type="submit"      variant="default"    >      Submit    </Button>  </form></Form>

Installation

pnpm dlx shadcn@latest add @optics/form

Props

<FormControl />
Name
Type
render
string(default: undefined)