use-organization-creation-defaults.mdx

title	useOrganizationCreationDefaults()
description	Retrieve organization creation defaults for the current user in your React application with Clerk's useOrganizationCreationDefaults() hook.
sdk	chrome-extension, expo, nextjs, react, react-router, tanstack-react-start

The useOrganizationCreationDefaults() hook retrieves the organization creation defaults for the current user. This includes a suggested organization name based on your application's default naming rules, and an advisory if an organization with that name or domain already exists.

Parameters

useOrganizationCreationDefaults() accepts a single object with the following optional properties:

Returns

OrganizationCreationDefaultsResource

- `form` - `object`

An object containing the suggested form values:

• name - The suggested organization name.
• slug - The suggested organization slug.
• logo - The suggested organization logo URL, or null.
• blurHash - The blur hash for the logo, or null.

---

• advisory
• object | null

An advisory object if there's a potential issue with the suggested organization, or null if no issues. Contains:

• code - The advisory type. Currently only 'organization_already_exists'.
• severity - The severity level. Currently only 'warning'.
• meta - Additional metadata, such as organization_name and organization_domain for existing organizations.

Examples

Basic usage

The following example demonstrates how to use the useOrganizationCreationDefaults() hook to pre-populate an organization creation form with suggested values.

```tsx {{ filename: 'src/components/CreateOrganization.tsx' }} import { useOrganizationCreationDefaults, useOrganizationList } from '@clerk/react' import { FormEventHandler, useEffect, useState } from 'react'

export default function CreateOrganization() { const { createOrganization } = useOrganizationList() const { data: defaults, isLoading } = useOrganizationCreationDefaults() const [organizationName, setOrganizationName] = useState('')

// Pre-populate the form with suggested organization name
useEffect(() => {
  if (defaults?.form.name) {
    setOrganizationName(defaults.form.name)
  }
}, [defaults?.form.name])

if (isLoading) return <div>Loading...</div>

const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
  e.preventDefault()
  await createOrganization?.({ name: organizationName })
}

return (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      value={organizationName}
      onChange={(e) => setOrganizationName(e.target.value)}
      placeholder="Organization name"
    />
    <button type="submit">Create organization</button>
  </form>
)

}

</If>

<If sdk="nextjs">
```tsx {{ filename: 'app/components/CreateOrganization.tsx' }}
'use client'

import { useOrganizationCreationDefaults, useOrganizationList } from '@clerk/nextjs'
import { FormEventHandler, useEffect, useState } from 'react'

export default function CreateOrganization() {
  const { createOrganization } = useOrganizationList()
  const { data: defaults, isLoading } = useOrganizationCreationDefaults()
  const [organizationName, setOrganizationName] = useState('')

  // Pre-populate the form with suggested organization name
  useEffect(() => {
    if (defaults?.form.name) {
      setOrganizationName(defaults.form.name)
    }
  }, [defaults?.form.name])

  if (isLoading) return <div>Loading...</div>

  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
    e.preventDefault()
    await createOrganization?.({ name: organizationName })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={organizationName}
        onChange={(e) => setOrganizationName(e.target.value)}
        placeholder="Organization name"
      />
      <button type="submit">Create organization</button>
    </form>
  )
}

```tsx {{ filename: 'app/components/CreateOrganization.tsx' }} import { useOrganizationCreationDefaults, useOrganizationList } from '@clerk/react-router' import { FormEventHandler, useEffect, useState } from 'react'

export default function CreateOrganization() { const { createOrganization } = useOrganizationList() const { data: defaults, isLoading } = useOrganizationCreationDefaults() const [organizationName, setOrganizationName] = useState('')

// Pre-populate the form with suggested organization name
useEffect(() => {
  if (defaults?.form.name) {
    setOrganizationName(defaults.form.name)
  }
}, [defaults?.form.name])

if (isLoading) return <div>Loading...</div>

const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
  e.preventDefault()
  await createOrganization?.({ name: organizationName })
}

return (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      value={organizationName}
      onChange={(e) => setOrganizationName(e.target.value)}
      placeholder="Organization name"
    />
    <button type="submit">Create organization</button>
  </form>
)

}

</If>

<If sdk="chrome-extension">
```tsx {{ filename: 'src/components/CreateOrganization.tsx' }}
import { useOrganizationCreationDefaults, useOrganizationList } from '@clerk/chrome-extension'
import { FormEventHandler, useEffect, useState } from 'react'

export default function CreateOrganization() {
  const { createOrganization } = useOrganizationList()
  const { data: defaults, isLoading } = useOrganizationCreationDefaults()
  const [organizationName, setOrganizationName] = useState('')

  // Pre-populate the form with suggested organization name
  useEffect(() => {
    if (defaults?.form.name) {
      setOrganizationName(defaults.form.name)
    }
  }, [defaults?.form.name])

  if (isLoading) return <div>Loading...</div>

  const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
    e.preventDefault()
    await createOrganization?.({ name: organizationName })
  }

  return (
    <form onSubmit={handleSubmit}>
      <input
        type="text"
        value={organizationName}
        onChange={(e) => setOrganizationName(e.target.value)}
        placeholder="Organization name"
      />
      <button type="submit">Create organization</button>
    </form>
  )
}

```tsx {{ filename: 'app/components/CreateOrganization.tsx' }} import { useOrganizationCreationDefaults, useOrganizationList } from '@clerk/tanstack-react-start' import { FormEventHandler, useEffect, useState } from 'react'

export default function CreateOrganization() { const { createOrganization } = useOrganizationList() const { data: defaults, isLoading } = useOrganizationCreationDefaults() const [organizationName, setOrganizationName] = useState('')

// Pre-populate the form with suggested organization name
useEffect(() => {
  if (defaults?.form.name) {
    setOrganizationName(defaults.form.name)
  }
}, [defaults?.form.name])

if (isLoading) return <div>Loading...</div>

const handleSubmit: FormEventHandler<HTMLFormElement> = async (e) => {
  e.preventDefault()
  await createOrganization?.({ name: organizationName })
}

return (
  <form onSubmit={handleSubmit}>
    <input
      type="text"
      value={organizationName}
      onChange={(e) => setOrganizationName(e.target.value)}
      placeholder="Organization name"
    />
    <button type="submit">Create organization</button>
  </form>
)

}

</If>

<If sdk="expo">
```tsx {{ filename: 'components/CreateOrganization.tsx' }}
import { useOrganizationCreationDefaults, useOrganizationList } from '@clerk/expo'
import { useEffect, useState } from 'react'
import { Text, TextInput, TouchableOpacity, View } from 'react-native'

export default function CreateOrganization() {
  const { createOrganization } = useOrganizationList()
  const { data: defaults, isLoading } = useOrganizationCreationDefaults()
  const [organizationName, setOrganizationName] = useState('')

  // Pre-populate the form with suggested organization name
  useEffect(() => {
    if (defaults?.form.name) {
      setOrganizationName(defaults.form.name)
    }
  }, [defaults?.form.name])

  if (isLoading) return <Text>Loading...</Text>

  const handleSubmit = async () => {
    await createOrganization?.({ name: organizationName })
  }

  return (
    <View>
      <TextInput
        value={organizationName}
        onChangeText={setOrganizationName}
        placeholder="Organization name"
      />
      <TouchableOpacity onPress={handleSubmit}>
        <Text>Create organization</Text>
      </TouchableOpacity>
    </View>
  )
}

Display advisory warnings

The following example demonstrates how to use the advisory property to display a warning when an organization with the suggested name or domain already exists.

Next steps

- [Build a custom flow for creating Organizations](/docs/guides/development/custom-flows/organizations/create-organizations) - Learn how to build a custom flow for creating Organizations.

---

• Configure default naming rules
• Learn how to configure default naming rules for your Organizations.