Module: components/forms

Variables

FormFieldContext

• Const FormFieldContext: Context<FormFieldContextValue<FieldValues, string>>

Defined in

packages/webapp-libs/webapp-core/src/components/forms/form/formField/formField.component.tsx:11

---

FormItemContext

• Const FormItemContext: Context<FormItemContextValue>

Defined in

packages/webapp-libs/webapp-core/src/components/forms/form/formItem/formItem.component.tsx:9

Functions

Checkbox

▸ Checkbox(props): ReactNode

NOTE: Exotic components are not callable.

Parameters

Name	Type
props	Omit<CheckboxProps & RefAttributes<HTMLButtonElement> & { error?: string ; label?: ReactNode }, "ref"> & RefAttributes<HTMLButtonElement>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

---

Dropzone

▸ Dropzone(«destructured»): Element

Parameters

Name	Type
«destructured»	DropzoneProps

Returns

Element

Defined in

packages/webapp-libs/webapp-core/src/components/forms/dropzone/dropzone.component.tsx:16

---

Form

▸ Form<TFieldValues, TContext, TTransformedValues>(props): Element

A provider component that propagates the useForm methods to all children components via React Context API. To be used with useFormContext.

Type parameters

Name	Type
TFieldValues	extends FieldValues
TContext	any
TTransformedValues	extends undefined | FieldValues = undefined

Parameters

Name	Type	Description
props	FormProviderProps<TFieldValues, TContext, TTransformedValues>	all useFrom methods

Returns

Element

Remarks

API • Demo

Example

function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} >
      <form onSubmit={methods.handleSubmit(onSubmit)}>
        <NestedInput />
        <input type="submit" />
      </form>
    </FormProvider>
  );
}

 function NestedInput() {
  const { register } = useFormContext(); // retrieve all hook methods
  return <input {...register("test")} />;
}

Defined in

node_modules/.pnpm/[email protected]_react@18.2.0/node_modules/react-hook-form/dist/useFormContext.d.ts:64

---

FormControl

▸ FormControl(props): ReactNode

NOTE: Exotic components are not callable.

Parameters

Name	Type
props	Omit<SlotProps & RefAttributes<HTMLElement>, "ref"> & RefAttributes<HTMLElement>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

---

FormDescription

▸ FormDescription(props): ReactNode

NOTE: Exotic components are not callable.

Parameters

Name	Type
props	HTMLAttributes<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

---

FormField

▸ FormField<TFieldValues, TName>(«destructured»): Element

Type parameters

Name	Type
TFieldValues	extends FieldValues = FieldValues
TName	extends string = FieldPath<TFieldValues>

Parameters

Name	Type
«destructured»	ControllerProps<TFieldValues, TName>

Returns

Element

Defined in

packages/webapp-libs/webapp-core/src/components/forms/form/formField/formField.component.tsx:13

---

FormItem

▸ FormItem(props): ReactNode

NOTE: Exotic components are not callable.

Parameters

Name	Type
props	HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

---

FormLabel

▸ FormLabel(props): ReactNode

NOTE: Exotic components are not callable.

Parameters

Name	Type
props	Omit<LabelProps & RefAttributes<HTMLLabelElement>, "ref"> & RefAttributes<HTMLLabelElement>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

---

FormMessage

▸ FormMessage(props): ReactNode

NOTE: Exotic components are not callable.

Parameters

Name	Type
props	HTMLAttributes<HTMLParagraphElement> & RefAttributes<HTMLParagraphElement>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

---

Input

▸ Input(props): ReactNode

NOTE: Exotic components are not callable.

Parameters

Name	Type
props	InputHTMLAttributes<HTMLInputElement> & { error?: string ; label?: ReactNode } & RefAttributes<HTMLInputElement>

Returns

ReactNode

Defined in

node_modules/.pnpm/@[email protected]/node_modules/@types/react/index.d.ts:393

---

useFormField

▸ useFormField(): Object

Returns

Object

Name	Type
error?	FieldError
formDescriptionId	string
formItemId	string
formMessageId	string
id	string
invalid	boolean
isDirty	boolean
isTouched	boolean
name	string

Defined in

packages/webapp-libs/webapp-core/src/components/forms/form/useFormField/useFormField.hook.ts:6