Patterns
Organization switcher
A searchable right-hand overlay for switching organizations.
Interactive local example · fictional data
The Code tab contains this preview’s complete source, including sample data and interaction state. Load the package stylesheet and Switzer font as described in the installation guide. Additional layout utilities require Tailwind CSS in your application.
API reference
| Prop | Type | Default |
|---|---|---|
| organizations | Organization[] | required |
| selectedId | string | — |
| onSelect | (organization) => void | — |
| onManage | () => void | — |
| label | string | "Select organization" |
| disabled | boolean | false |
Primitives also accept their underlying HTML or Radix props. Full types are included with the package.
Behavior & accessibility
- Organization contains id, name, and optional code, memberCount, and logo. IDs must be unique.
- 400px on desktop; full width below 640px. Radix handles focus trapping, Escape, outside-click dismissal, and focus restoration.
- Manage appears only when onManage is supplied. Selection and management close the overlay. No production APIs are called.
- Available in @ajsinnovations/ui 0.1.1 and later.
Reference
Admin organization drawer, inspected read-only