<!-- source-hash: 350f1108c023fd5344b6b3ccac5cf4de -->
Presentational, fully-controlled form component for the "Create Organization" (Sign Up) step of the OpenFrame auth flow.

## Key Components

| Export | Type | Description |
|---|---|---|
| `CreateOrganizationForm` | React component | Main form component — owns no state; delegates all state, validation, and submission to the consumer |
| `CreateOrganizationFormProps` | Interface | Complete props contract covering field values, change handlers, error/status messages, SSO options, and layout customization |

## Key Behaviors

- **Deferred validation** — field errors are surfaced via `useDeferredError`, delaying display until the user blurs or pauses typing, avoiding premature error messages
- **Inline status messages** — `emailStatus` and `domainStatus` props provide non-error feedback (e.g., availability checks); `errors.*` always takes precedence
- **Domain suffix adornment** — `domainSuffix` renders a fixed suffix inside the domain input (e.g., `.openframe.ai`)
- **SSO alternatives** — when `ssoProviders` is supplied, an "or continue with" divider and `SsoProviderButtons` render below the primary submit; `ssoDisabled` gates them independently of the form fields
- **Enter-key submission** — `handleKeyDown` fires `onSubmit` on `Enter` across all inputs

## Usage Example

```typescript
import { CreateOrganizationForm } from './create-organization-form'
import { useState } from 'react'

export function SignUpPage() {
  const [email, setEmail] = useState('')
  const [orgName, setOrgName] = useState('')
  const [domain, setDomain] = useState('')
  const [agreed, setAgreed] = useState(false)

  return (
    <CreateOrganizationForm
      email={email}
      organizationName={orgName}
      domain={domain}
      agreedToTerms={agreed}
      onEmailChange={setEmail}
      onOrganizationNameChange={setOrgName}
      onDomainChange={setDomain}
      onAgreedToTermsChange={setAgreed}
      onSubmit={() => console.log('submit')}
      domainSuffix=".openframe.ai"
      termsUrl="/terms"
      privacyPolicyUrl="/privacy"
      errors={{ email: 'Email already in use' }}
      ssoProviders={[{ id: 'google', label: 'Google' }]}
      onSsoClick={(p) => console.log('SSO:', p)}
    />
  )
}
```

**Source:** [`flamingo-stack/openframe-oss-lib`](https://github.com/flamingo-stack/openframe-oss-lib)