Form
shadcn/uiBuilding forms with React Hook Form and Zod.
Form
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>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) |