primitives/@mihcm/ui·v0.21.0·stable

OrgSelector

Form-field-shaped picker for hierarchical org structures (departments, teams, business units, locations). Five variants (popover/inline/columns/drawer/command) and four selection modes (single/multi/cascade/include-descendants) compose freely. Full WAI-ARIA TreeView keyboard model, lazy loading, optional virtualization for large trees.

Configurator Examples Usage Accessibility Api

Live preview

Adjust the controls on the right; the preview and code update in real time.

Reporting department

Pick the team this employee reports into.

example.tsxtsx

StackBlitz

import { OrgSelector } from '@mihcm/ui/OrgSelector';

export function Example() {
  return (
    <OrgSelector
  label="Reporting department"
  placeholder="Select department"
  helpText="Pick the team this employee reports into."
  variant="popover"
  mode="single"
  pickable="any-level"
  triggerDisplay="chips"
  searchable
    ></OrgSelector>
  );
}

Install

Both paths are valid. CLI ships the source into your repo (you own it). Install pins via npm.

npx @mihcm/cli add OrgSelector

Copies the source into components/ds/OrgSelector.tsx. You own the file. Use --out to override the directory or --force to overwrite.