> ## Documentation Index
> 
> Fetch the complete documentation index at: [/docs/llms.txt](/docs/llms.txt)
> 
> Use this file to discover all available pages before exploring further.

[Skip to main content](#content-area)

## 

[​

](#props)

Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `formId` | `string` | — | Form slug from your dashboard. Fetches schema automatically. |
| `schema` | `FormSchema` | — | Pass a schema directly (headless usage). |
| `endpoint` | `string` | — | Submission URL. Required when using `schema` without `formId`. |
| `baseUrl` | `string` | `https://osforms.com` | Override for self-hosted instances. |
| `mode` | `'conversational' | 'classic'` | schema default | Override the form’s render mode. |
| `theme` | `Partial<FormTheme>` | — | Theme overrides merged with schema theme and defaults. |
| `fullScreen` | `boolean` | `false` | Renders the form fixed to the full viewport (`position: fixed`). |
| `onComplete` | `() => void` | — | Called when the form is successfully submitted. |
| `onError` | `(error: Error) => void` | — | Called when a submission error occurs. |
| `loadingComponent` | `ReactNode` | — | Custom loading state while schema is fetched. |
| `errorComponent` | `ReactNode` | — | Custom error state if schema fetch fails. |

## 

[​

](#examples)

Examples

### 

[​

](#full-screen-conversational-form)

Full-screen conversational form

```
<OSForm
  formId="abc123"
  mode="conversational"
  fullScreen
  onComplete={() => router.push('/thanks')}
/>
```

### 

[​

](#embedded-classic-form)

Embedded classic form

```
<OSForm
  formId="abc123"
  mode="classic"
  theme={{ colors: { primary: '#6366f1' } }}
/>
```

### 

[​

](#error-handling)

Error handling

```
<OSForm formId="abc123" onError={(err) => toast.error(err.message)} />
```

### 

[​

](#custom-loading-state)

Custom loading state

```
<OSForm
  formId="abc123"
  loadingComponent={<Spinner />}
  errorComponent={<p>Failed to load form.</p>}
/>
```

⌘I