Skip to main content

Variable: defaultComponentMap

const defaultComponentMap: object

Defined in: packages/react/src/components/index.ts:43

The default HTML-based component map used by <ZodForm> and <FieldRenderer>. Maps component names (e.g. 'Input', 'Select', 'Checkbox') to their React implementations. Pass a subset of this map as components to override individual components at the form level.

Type Declaration​

Checkbox​

Checkbox: MemoExoticComponent<(props) => Element>

Combobox​

Combobox: MemoExoticComponent<(__namedParameters) => Element> = ComboboxFallback

DatePicker​

DatePicker: MemoExoticComponent<(props) => Element>

Field​

Field: (props) => DetailedReactHTMLElement<HTMLAttributes<HTMLDivElement>, HTMLElement>

Parameters​

props​

HTMLAttributes<HTMLDivElement>

Returns​

DetailedReactHTMLElement<HTMLAttributes<HTMLDivElement>, HTMLElement>

FieldDescription​

FieldDescription: (props) => DetailedReactHTMLElement<HTMLAttributes<HTMLParagraphElement>, HTMLElement>

Parameters​

props​

HTMLAttributes<HTMLParagraphElement>

Returns​

DetailedReactHTMLElement<HTMLAttributes<HTMLParagraphElement>, HTMLElement>

FieldLabel​

FieldLabel: (props) => DetailedReactHTMLElement<LabelHTMLAttributes<HTMLLabelElement>, HTMLElement>

Parameters​

props​

LabelHTMLAttributes<HTMLLabelElement>

Returns​

DetailedReactHTMLElement<LabelHTMLAttributes<HTMLLabelElement>, HTMLElement>

FieldMessage​

FieldMessage: (props) => DetailedReactHTMLElement<HTMLAttributes<HTMLParagraphElement>, HTMLElement>

Parameters​

props​

HTMLAttributes<HTMLParagraphElement>

Returns​

DetailedReactHTMLElement<HTMLAttributes<HTMLParagraphElement>, HTMLElement>

FileInput​

FileInput: MemoExoticComponent<(props) => Element>

Input​

Input: MemoExoticComponent<(props) => Element>

RadioGroup​

RadioGroup: MemoExoticComponent<(__namedParameters) => Element>

Select​

Select: MemoExoticComponent<(__namedParameters) => Element>

Switch​

Switch: MemoExoticComponent<(props) => Element>

Textarea​

Textarea: MemoExoticComponent<(props) => Element>

Use When​

  • You want to swap a single component while keeping the rest of the defaults
  • You are building a custom form renderer that extends the default set