Single select
The most common HR form-field shape — one node, popover trigger.
Pick the team this employee reports into.
import { useState } from 'react';
import { OrgSelector } from '@mihcm/ui/OrgSelector';
const [value, setValue] = useState<string | null>(null);
<OrgSelector
label="Reporting department"
placeholder="Select department"
data={ORG}
mode="single"
value={value}
onChange={(v) => setValue((v as string) ?? null)}
/>Multi select
Each node selected independently. No propagation.
Each department is selected independently.
<OrgSelector
label="Accessible departments"
data={ORG}
mode="multi"
value={value}
onChange={(v) => setValue((v as string[]) ?? [])}
/>Cascade
Selecting a parent selects every descendant. Parents with partial subtrees render in an indeterminate state.
Selecting a team selects every team underneath.
<OrgSelector
label="Reporting scope"
data={ORG}
mode="cascade"
value={value}
onChange={(v) => setValue((v as string[]) ?? [])}
/>Include descendants (compact payload)
Selecting a parent stores only the parent key — the consumer treats the value as "this node plus everything beneath". Useful for permission scopes and filter selectors that need a small payload.
Selecting a parent covers everything beneath, stored as one key.
<OrgSelector
label="Permission scope"
data={ORG}
mode="include-descendants"
value={value}
onChange={(v) => setValue((v as string[]) ?? [])}
/>Inline variant
The tree IS the field. Good for filter sidebars and full-page pickers.
<OrgSelector
variant="inline"
label="Departments"
data={ORG}
mode="multi"
defaultExpandedKeys={['mihcm', 'engineering']}
/>Leaf-only picking
Parents stay expandable but only leaves can be selected. Keeps deep hierarchies navigable without letting users pick a branch.
Parents are read-only — only leaves are selectable.
<OrgSelector
data={ORG}
mode="single"
pickable="leaf-only"
...
/>