Multistage Approval Flow Builder
Enterprise
Workflow
Visual workflow designer for configuring multi-stage approval processes in AI governance pipelines. Features inline editing, stage reordering, and unanimous/any-approver modes.
Preview
Build and configure approval stages with inline editing
Approval Flow Builder
3 stages configured
1
Team Review
1 approver: priya.sharma@company.com
Any approver can approve
2
Manager Approval
2 approvers: olivia.chen@company.com, yuki.tanaka@company.com
Unanimous approval required
3
Final Sign-off
1 approver: james.okonkwo@company.com
Any approver can approve
Empty State
Flow builder with no stages configured
Approval Flow Builder
0 stages configured
Props
MultistageApprovalFlowBuilder component API reference
| Prop | Type | Default | Description |
|---|---|---|---|
stages* | ApprovalStage[] | — | Array of approval stages |
onStagesChange* | (stages: ApprovalStage[]) => void | — | Callback when stages are modified |
className | string | — | Additional CSS classes |
ApprovalStage Type
| Prop | Type | Default | Description |
|---|---|---|---|
id* | string | — | Unique stage identifier |
name* | string | — | Display name for the stage |
approvers* | string[] | — | List of approver emails |
requireAll | boolean | — | Whether all approvers must approve (default: false) |
Usage
Import and implementation example
import { MultistageApprovalFlowBuilder } from '@/blocks/workflow/multistage-approval-flow-builder'
export default function Example() {
const [stages, setStages] = useState([
{
id: 'stage-1',
name: 'Team Review',
approvers: ['priya.sharma@company.com'],
requireAll: false,
},
{
id: 'stage-2',
name: 'Manager Approval',
approvers: ['olivia.chen@company.com', 'yuki.tanaka@company.com'],
requireAll: true,
},
])
return (
<MultistageApprovalFlowBuilder
stages={stages}
onStagesChange={setStages}
/>
)
}Built With
3 componentsThis block uses the following UI components from the design system:
Features
Built-in functionality
- Visual flow: Stage numbers and connector arrows show approval sequence
- Inline editing: Edit stage names and approvers directly in the flow
- Stage reordering: Move stages up or down in the sequence
- Unanimous mode: Toggle between any-approver or all-approvers required
- Dynamic stages: Add or remove approval stages as needed
- Approver management: Comma-separated email entry for approvers
- Dark mode: Full dark mode support
Accessibility
Accessibility considerations
ARIA Attributes
Edit and action buttons are native button elementsForm inputs have proper input semanticsSwitch component for unanimous mode toggleKeyboard Navigation
| Key | Action |
|---|---|
| Tab | Navigate between stages and controls |
| Enter / Space | Activate buttons or toggle switch |
Notes
- Stage numbers provide visual sequence
- Approver count shown in text
- Unanimous mode state described in text
- Add stage button clearly labeled