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

PropTypeDefaultDescription
stages*ApprovalStage[]Array of approval stages
onStagesChange*(stages: ApprovalStage[]) => voidCallback when stages are modified
classNamestringAdditional CSS classes

ApprovalStage Type

PropTypeDefaultDescription
id*stringUnique stage identifier
name*stringDisplay name for the stage
approvers*string[]List of approver emails
requireAllbooleanWhether 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 components

This 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 toggle

Keyboard Navigation

KeyAction
TabNavigate between stages and controls
Enter / SpaceActivate 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