> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tappify.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# TapForm

> Renders a JSON Schema as a form in the host's styling, validates it on submit and hands back the value.

```ts theme={null}
function TapForm<T>(__namedParameters): ReactElement;
```

Renders a JSON Schema as a form in the host's styling, validates it on submit
and hands back the value.

## Type Parameters

### T

`T`

## Parameters

### \_\_namedParameters

[`TapFormProps`](/extensions/reference/frontend-api/Interface.TapFormProps)\<`T`>

## Returns

`ReactElement`

## Remarks

Point it at the same schema file the manifest references, so the form and the
handler change together. Submit drops the fields left blank, then checks what
remains against the whole schema, so a `minimum`, `pattern` or `maxLength`
lands under the control it belongs to; a required field left empty is reported
without reaching the schema. A schema this SDK's Zod version cannot compile
still renders and still enforces required fields. `onSubmit` runs only when
nothing failed, and the form holds its own values, so a change to `value` after
the first render does not reset it. A form with no `value` has nothing to infer
`T` from, so annotate the handler's parameter.

## Example

```tsx theme={null}
import { TapForm, type TapSettingsProps } from '@tappify/extension-sdk';

const schema = {
  type: 'object',
  properties: { refreshMinutes: { type: 'integer', title: 'Refresh minutes' } },
  required: ['refreshMinutes'],
};

function Settings({ values, onChange }: TapSettingsProps) {
  return (
    <TapForm
      schema={schema}
      value={values}
      submitLabel="Save"
      onSubmit={next => onChange(next)}
    />
  );
}
```