Dropdowns — Workspace switcher with a create action

A workspace disclosure lists two radio choices with initials, access hints and a separate create action. Use when one active workspace needs an explicit identity.

ReactHTML

1440 × 480

Open in new tab

Component.tsx18 lines

export default function DropdownsWorkspaceSwitcher() {
  return (
    <details className="group w-72 text-neutral-900 sm:w-96" open><summary className="flex h-11 cursor-pointer list-none items-center justify-between gap-3 rounded-md border border-neutral-300 bg-white px-3 text-sm font-medium text-neutral-900 hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden"><span className="hidden group-has-[#dropdowns-workspace-switcher-personal:checked]:inline">Personal workspace</span>
    <span className="hidden group-has-[#dropdowns-workspace-switcher-shared:checked]:inline">Shared workspace</span><svg className="size-4" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m6 9 6 6 6-6" /></svg></summary>
    <div className="mt-2 rounded-lg border border-neutral-200 bg-white p-3 shadow-lg"><fieldset className="grid gap-1"><legend className="mb-2 px-2 text-xs font-medium text-neutral-500">Choose workspace</legend>
    <label className="flex cursor-pointer items-center gap-3 rounded-md border border-transparent p-2 hover:bg-neutral-50 has-[:checked]:border-neutral-300 has-[:checked]:bg-neutral-50 has-[:checked]:[&>svg]:opacity-100 has-[:checked]:[&>svg]:opacity-100 has-[:checked]:[&>svg]:opacity-100 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight]"><input className="sr-only focus-visible:outline-hidden" id="dropdowns-workspace-switcher-personal" name="dropdowns-workspace-switcher" value="personal" type="radio" aria-describedby="dropdowns-workspace-switcher-personal-hint" defaultChecked />
    <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-xs font-medium text-neutral-600" aria-hidden="true">PW</span>
    <span className="block min-w-0 flex-1"><span className="block text-sm font-medium text-neutral-900">Personal workspace</span>
    <span className="block mt-0.5 text-xs text-neutral-500" id="dropdowns-workspace-switcher-personal-hint">Only you have access</span></span>
    <svg className="size-4 opacity-0" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4L19 6" /></svg></label>
    <label className="flex cursor-pointer items-center gap-3 rounded-md border border-transparent p-2 hover:bg-neutral-50 has-[:checked]:border-neutral-300 has-[:checked]:bg-neutral-50 has-[:checked]:[&>svg]:opacity-100 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 forced-colors:has-[:checked]:border-[Highlight]"><input className="sr-only focus-visible:outline-hidden" id="dropdowns-workspace-switcher-shared" name="dropdowns-workspace-switcher" value="shared" type="radio" aria-describedby="dropdowns-workspace-switcher-shared-hint"  />
    <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-neutral-100 text-xs font-medium text-neutral-600" aria-hidden="true">SW</span>
    <span className="block min-w-0 flex-1"><span className="block text-sm font-medium text-neutral-900">Shared workspace</span>
    <span className="block mt-0.5 text-xs text-neutral-500" id="dropdowns-workspace-switcher-shared-hint">12 members have access</span></span>
    <svg className="size-4 opacity-0" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="m5 12 4 4L19 6" /></svg></label></fieldset>
    <div className="mt-3 border-t border-neutral-200 pt-2"><button className="flex h-9 w-full items-center rounded-md px-2 text-left text-sm text-neutral-900 hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" type="button" ><svg className="size-4 mr-2" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"><path d="M12 5v14M5 12h14" /></svg>Create workspace</button></div></div></details>
  )
}

Pattern notes

When to use: Use for an active workspace with a short list of alternatives. Choose an account menu for profile and session destinations. Variations: change workspace names, add one more workspace, or replace Create with an invitation action.
Hierarchy: Read the current workspace, choice legend, each workspace and access hint, then Create workspace. Workspace names use at most 2 words, hints at most 5 words and initials 2 characters. Each hint describes its radio; trigger text follows the selected workspace.
Responsive: The root grows from 288px to 384px at 640px. Panel width follows the root, and the two choices stay stacked. Workspace copy can wrap inside min-w-0 while initials and check markers remain fixed.
Layout: A 288px disclosure grows to 384px at sm. Its 44px outlined summary sits 8px above a full-width shadow-lg panel with 12px padding. Two radio rows use 8px padding, 32px initials tiles, 12px gaps and title/hint text. A top divider separates a 36px create action.
States: The disclosure starts open with Personal workspace selected. Checked options have a border, neutral-50 fill and a check marker controlled through opacity. Forced colors use a Highlight border. Summary, create action and radio labels show focus outlines. Arrow keys switch the radios.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ [Personal workspace ^]                               │
│ ┌──────────────────────────────────────────────┐     │
│ │ Choose workspace                             │     │
│ │ [PW Personal workspace]                Check │     │
│ │ Only you have access                         │     │
│ │ [SW Shared workspace]                        │     │
│ │ 12 members have access                       │     │
│ │ ──────────────────────────────────────────── │     │
│ │ [+ Create workspace]                         │     │
│ └──────────────────────────────────────────────┘     │
└──────────────────────────────────────────────────────┘

View all

Dropdowns — Account menu with profile header
Layout tags: layered,icons,compact
Dropdowns — Action menu with sections and shortcuts
Layout tags: layered,icons,compact
Dropdowns — Breadcrumb branch disclosure
Layout tags: layered,list,compact

Dropdowns — Workspace switcher with a create action

Pattern notes

More in Dropdowns

Dropdowns — Account menu with profile header

Dropdowns — Action menu with sections and shortcuts

Dropdowns — Breadcrumb branch disclosure