`<TaskChooseOrganization />` component

The <TaskChooseOrganization /> component renders a UI for resolving the choose-organization after-auth task. The functionality of the <TaskChooseOrganization /> component is controlled by the instance settings you specify in the Clerk Dashboard, such as sign-in and sign-up options and social connections. You can further customize your <TaskChooseOrganization /> component by passing additional properties at the time of rendering.

Important

The <TaskChooseOrganization/> component cannot render when a user doesn't have current session tasks.

Properties

All props are optional.

Name
redirectUrlComplete
Type
string
Description
The full URL or path to navigate to after successfully completing all tasks.
Name
appearance
Type
Appearance | undefined
Description
Optional object to style your components. Will only affect Clerk components and not Account Portal pages.

Usage with frameworks

The following example demonstrates how to host the <TaskChooseOrganization /> component on a custom page.

Next.js

React

app/layout.tsx

import { ClerkProvider } from '@clerk/nextjs'

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ClerkProvider taskUrls={{ 'choose-organization': '/onboarding/choose-organization' }}>
          {children}
        </ClerkProvider>
      </body>
    </html>
  )
}

The <TaskChooseOrganization /> component must be used in conjunction with the <SignIn /> component. See the .

app/onboarding/choose-organization/page.tsx

import { TaskChooseOrganization } from '@clerk/nextjs'

export default function Page() {
  return <TaskChooseOrganization redirectUrlComplete="/dashboard" />
}

index.tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.tsx'
import { ClerkProvider } from '@clerk/clerk-react'

// Import your Publishable Key
const PUBLISHABLE_KEY = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

if (!PUBLISHABLE_KEY) {
  throw new Error('Add your Clerk Publishable Key to the .env file')
}

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <ClerkProvider
      publishableKey={PUBLISHABLE_KEY}
      taskUrls={{ 'choose-organization': '/onboarding/choose-organization' }}
    >
      <App />
    </ClerkProvider>
  </React.StrictMode>,
)

src/onboarding/choose-organization.tsx

import { TaskChooseOrganization } from '@clerk/clerk-react'

const SelectOrganizationPage = () => <TaskChooseOrganization redirectUrlComplete="/dashboard" />

export default SelectOrganizationPage

Usage with JavaScript

The following methods available on an instance of the class are used to render and control the <TaskChooseOrganization /> component:

The following examples assume that you have followed the in order to add Clerk to your JavaScript application.

`mountTaskChooseOrganization()`

Render the <TaskChooseOrganization /> component to an HTML <div> element.

function mountTaskChooseOrganization(
  node: HTMLDivElement,
  props?: TaskChooseOrganizationProps,
): void

`mountTaskChooseOrganization()` params

Name
node
Type
HTMLDivElement
Description
The <div> element used to render in the <TaskChooseOrganization /> component
Name
props?
Type
TaskChooseOrganizationProps
Description
The properties to pass to the <TaskChooseOrganization /> component.

`mountTaskChooseOrganization()` usage

main.ts

import { Clerk } from '@clerk/clerk-js'

const pubKey = import.meta.env.VITE_CLERK_PUBLISHABLE_KEY

const clerk = new Clerk(pubKey)
await clerk.load()

if (clerk.isSignedIn) {
  // Mount user button component
  document.getElementById('signed-in').innerHTML = `
          <div id="user-button"></div>
        `

  const userbuttonDiv = document.getElementById('user-button')

  clerk.mountUserButton(userbuttonDiv)
} else if (clerk.session?.currentTask) {
  switch (clerk.session.currentTask.key) {
    case 'choose-organization': {
      document.getElementById('app').innerHTML = `
              <div id="task-choose-organization"></div>
            `

      const taskChooseOrganizationDiv = document.getElementById('task-choose-organization')

      clerk.mountTaskChooseOrganization(taskChooseOrganizationDiv)
    }
  }
}

`unmountTaskChooseOrganization()`

Unmount and run cleanup on an existing <TaskChooseOrganization /> component instance.

function unmountTaskChooseOrganization(node: HTMLDivElement): void

`unmountTaskChooseOrganization()` params

Name
node
Type
HTMLDivElement
Description
The container <div> element with a rendered <SignUp /> component instance

Customization

To learn about how to customize Clerk components, see the customization documentation.

If Clerk's prebuilt components don't meet your specific needs or if you require more control over the logic, you can rebuild the existing Clerk flows using the Clerk API. For more information, see the custom flow guides.

Edit this page on GitHub

Last updated on Aug 22, 2025

<TaskChooseOrganization /> component

Feedback

`<TaskChooseOrganization />` component