Skip to main content

Blocks

Compensation​

Self-contained block for viewing and managing an employee's jobs and compensation — the same experience the dashboard surfaces, but as a drop-in component that doesn't require the surrounding dashboard chrome.

Remarks​

Renders a read-only card showing the employee's job(s), pay type, wage, and effective date, along with affordances to edit a job's compensation, add a first job from the empty state, add another job (when the primary job is Nonexempt), delete a non-primary job, and cancel a scheduled future-dated change. Choosing to edit or add a job swaps the card for the corresponding form; a successful add returns to the card with a dismissible "Job successfully added." alert, an edit returns to the card without an alert, and cancelling returns without saving. Wraps everything in error and suspense boundaries.

The card and form surfaces (CompensationCard, CompensationEditForm, CompensationAddJobForm, CompensationAddAnotherJobForm) are also exported individually for cases where that orchestration is the wrong fit — for example, when a form needs to render in a modal or drawer, when the card needs to appear read-only with no edit/add affordances, or when the swap is driven by a router. Using them directly means owning the swap, the alert, and any cross-component state yourself.


CompensationProps​

Props for Compensation.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementCompensation>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/compensation/card/editRequestedFired when an "Edit" CTA is clicked for a job; the block opens the edit form for that job{ employeeId: string, jobId: string }
employee/management/compensation/card/addRequestedFired when the "Add job" CTA is clicked from the card's empty state; the block opens the add-first-job form{ employeeId: string }
employee/management/compensation/card/addAnotherRequestedFired when the "Add another job" CTA is clicked; the block opens the add-another-job form{ employeeId: string }
employee/management/compensation/card/jobDeletedFired after a non-primary job is deleted via the card's confirm dialog; the block stays on the card{ employeeId: string, jobId: string }
employee/management/compensation/card/changeCancelledFired after a scheduled future-dated change is cancelled from the card; the block stays on the card{ employeeId: string, compensationId: string }
employee/management/compensation/editForm/submittedFired after an edit-compensation save completes; the block returns to the card viewUpdated Compensation entity
employee/management/compensation/editForm/cancelledFired when the user cancels the edit form; the block returns to the card view—
employee/management/compensation/addJobForm/submittedFired after the first job + compensation are saved; the block returns to the card and surfaces the "Job added" alertUpdated Compensation entity
employee/management/compensation/addJobForm/cancelledFired when the user cancels the add-job form; the block returns to the card view—
employee/management/compensation/addAnotherJobForm/submittedFired after a secondary job + compensation are saved; the block returns to the card and surfaces the "Job added" alertUpdated Compensation entity
employee/management/compensation/addAnotherJobForm/cancelledFired when the user cancels the add-another-job form; the block returns to the card view—
employee/management/compensation/alertDismissedFired when the user dismisses the "Job added" success alert above the cardnull

Endpoints​


CompensationAddAnotherJobForm​

Standalone form for adding a secondary job and compensation to an employee from the management surface.

Remarks​

Routed from CompensationCard's employee/management/compensation/card/addAnotherRequested event. Emits its own scoped submitted and cancelled events — both are your cue to return to the card. Compensation bundles the card, this form, and the swap and alert wiring as a single drop-in; reach for this form directly only when that orchestration is the wrong fit.


CompensationAddAnotherJobFormProps​

Props for CompensationAddAnotherJobForm.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked when the form emits an event. See the events table on CompensationAddAnotherJobForm for the available event types and payloads.
dictionary?Record<"en", DeepPartial<EmployeeManagementCompensation>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

Inherits children, className, defaultValues from CommonComponentInterface.


Events​

EventDescriptionData
employee/management/compensation/addAnotherJobForm/submittedFired after the secondary job and compensation are saved; use it to return to the cardSaved Compensation entity
employee/management/compensation/addAnotherJobForm/cancelledFired when the user clicks Cancel; use it to return to the card—

CompensationAddJobForm​

Standalone form for adding an employee's first job and compensation from the management surface.

Remarks​

Routed from CompensationCard's employee/management/compensation/card/addRequested event. Emits its own scoped submitted and cancelled events — both are your cue to return to the card. Compensation bundles the card, this form, and the swap and alert wiring as a single drop-in; reach for this form directly only when that orchestration is the wrong fit.


CompensationAddJobFormProps​

Props for CompensationAddJobForm.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked when the form emits an event. See the events table on CompensationAddJobForm for the available event types and payloads.
dictionary?Record<"en", DeepPartial<EmployeeManagementCompensation>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

Inherits children, className, defaultValues from CommonComponentInterface.


Events​

EventDescriptionData
employee/management/compensation/addJobForm/submittedFired after the job and compensation are saved; use it to return to the cardSaved Compensation entity
employee/management/compensation/addJobForm/cancelledFired when the user clicks Cancel; use it to return to the card—

CompensationCard​

Standalone "Compensation" management card that displays an employee's current jobs and compensation, surfaces pending future-dated changes, and exposes edit, add, and delete affordances.

Remarks​

The card owns its own data fetch, the pending-change alerts and review modal, and the delete-job confirm dialog. It does not render the compensation edit or add-job forms — instead, it emits a distinct request event for each action, and the consumer routes those to CompensationEditForm, CompensationAddJobForm, or CompensationAddAnotherJobForm and renders any post-save success alerts. Compensation bundles the card, the three form surfaces, and the swap and alert wiring as a single drop-in; reach for the card directly only when that orchestration is the wrong fit (for example, when a form needs to render in a modal or drawer, or when the swap is driven by a router).


CompensationCardProps​

Props for CompensationCard.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked when the card emits an event. See the events table on CompensationCard for the available event types and payloads.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

Events​

EventDescriptionData
employee/management/compensation/card/editRequestedFired when an "Edit" CTA is clicked for a job{ employeeId: string, jobId: string }
employee/management/compensation/card/addRequestedFired when the "Add job" CTA is clicked from the empty state{ employeeId: string }
employee/management/compensation/card/addAnotherRequestedFired when the "Add another job" CTA is clicked{ employeeId: string }
employee/management/compensation/card/jobDeletedFired after a non-primary job is deleted via the card's confirm dialog{ employeeId: string, jobId: string }
employee/management/compensation/card/changeCancelledFired after a scheduled future-dated change is cancelled from the card{ employeeId: string, compensationId: string }

CompensationEditForm​

Standalone form that edits the compensation for a single job, branching automatically between editing the current compensation and an already-scheduled future-dated change.

Remarks​

Pair with CompensationCard to route its employee/management/compensation/card/editRequested event to this form. Compensation bundles the card, the three form surfaces (edit, add job, add another job), and the swap and alert wiring as a single drop-in; reach for this form directly only when that orchestration is the wrong fit (for example, when the form needs to render in a modal or drawer, or when the swap is driven by a router).


CompensationEditFormProps​

Props for CompensationEditForm.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
jobIdstringThe id of the job whose compensation is being edited (for example, the jobId from the CompensationCard employee/management/compensation/card/editRequested payload). The form inspects the job's compensations to decide whether to edit the current compensation or an already-scheduled future-dated change.
onEventOnEventType<EventType, unknown>Callback invoked when the form emits an event. See the events table on CompensationEditForm for the available event types and payloads.
dictionary?Record<"en", DeepPartial<EmployeeManagementCompensation>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

Inherits children, className, defaultValues from CommonComponentInterface.


Events​

EventDescriptionData
employee/management/compensation/editForm/submittedFired after the compensation change is saved; use it to return to the cardThe updated Compensation entity
employee/management/compensation/editForm/cancelledFired when the user clicks Cancel; use it to return to the card—

Dashboard​

Employee self-service dashboard summarizing a single employee's basic details, job and pay, taxes, and documents.

Remarks​

Renders a tabbed overview of the employee, wrapped in the SDK's standard error and suspense boundaries. The active tab may be controlled via selectedTab or left uncontrolled, in which case it defaults to basic details. Each tab composes the read-only section cards listed below.


DashboardProps​

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeDashboard>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.
selectedTab?DashboardTabThe currently active tab. Defaults to 'basicDetails' when uncontrolled.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Components​


Deductions​

Self-contained block for viewing and managing an employee's post-tax deductions — the same experience the dashboard surfaces, but as a drop-in component that doesn't require the surrounding dashboard chrome.

Remarks​

Renders a card listing the employee's active deductions with affordances to add a new deduction, edit an existing one, or delete one via a confirm dialog. Choosing to add or edit swaps the card for the deduction form; a successful save returns to the card and emits the corresponding event, and cancelling returns without saving. Wraps everything in error and suspense boundaries.

The card and form surfaces (DeductionsCard, DeductionsEditForm) are also exported individually for cases where that orchestration is the wrong fit — for example, when the form needs to render in a modal or drawer, or when the swap is driven by a router. Using them directly means owning the swap, the alert, and any cross-component state yourself.


DeductionsProps​

Props for Deductions.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementDeductions>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/deductions/card/addRequestedFired when the "Add deduction" CTA is clicked from the card; the block opens the edit form in add mode{ employeeId: string }
employee/management/deductions/card/editRequestedFired when an "Edit" CTA is clicked for a deduction; the block opens the edit form pre-populated with that deductionThe matching Garnishment
employee/management/deductions/card/deletedFired after a deduction is deleted via the confirm dialog; the block stays on the cardThe deleted Garnishment
employee/management/deductions/editForm/createdFired after a new deduction is saved from the edit form; the block returns to the card viewThe created Garnishment
employee/management/deductions/editForm/updatedFired after an existing deduction is updated from the edit form; the block returns to the card viewThe updated Garnishment
employee/management/deductions/editForm/cancelledFired when the user cancels the edit form; the block returns to the card view—
employee/management/deductions/alertDismissedFired when the user dismisses a success alert above the cardnull

DeductionsCard​

Standalone read-only card listing an employee's active deductions, with affordances to add, edit, or delete a deduction.

Remarks​

Fetches its own data and owns the delete confirm dialog. Has no alert API — alert rendering is the consumer's responsibility. Add and edit affordances do not open a form themselves; emit-then-route is the contract, so the consumer listens for the addRequested / editRequested events and renders DeductionsEditForm (or its own equivalent) accordingly. For an orchestrated card-plus-form flow, use Deductions instead.


DeductionsCardProps​

Props for DeductionsCard.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked when the card emits an event. See the events table on DeductionsCard for the available event types and payloads.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

Events​

EventDescriptionData
employee/management/deductions/card/addRequestedFired when the "Add deduction" CTA is clicked{ employeeId: string }
employee/management/deductions/card/editRequestedFired when an "Edit" CTA is clicked for a deductionThe matching Garnishment
employee/management/deductions/card/deletedFired after a deduction is deleted via the confirm dialogThe deleted Garnishment

DeductionsEditForm​

Standalone add/edit surface for a single employee deduction.

Remarks​

Renders the inline form for a post-tax custom deduction or court-ordered garnishment. Looks up the row to edit by editingDeductionId; omit it to open in add mode. Resolves its text against the Employee.Management.Deductions translation namespace so partner overrides on that namespace flow into the form. For an orchestrated card-plus-form flow, use Deductions.


DeductionsEditFormProps​

Props for DeductionsEditForm.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked when the form emits an event. See the events table on DeductionsEditForm for the available event types and payloads.
dictionary?Record<"en", DeepPartial<EmployeeManagementDeductions>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.
editingDeductionId?stringWhen provided, the form opens in edit mode pre-populated with the matching active deduction. Omit to open in add mode.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/deductions/editForm/createdFired after a new deduction is savedThe created Garnishment
employee/management/deductions/editForm/updatedFired after an existing deduction is updatedThe updated Garnishment
employee/management/deductions/editForm/cancelledFired when the user cancels the form—

DocumentManager​

Read-only document viewer for the admin-facing employee dashboard. Renders the selected form's PDF — including unsigned forms, which are shown as-is. Signing is intentionally not offered here; forms are signed by the employee during onboarding, not by an admin viewing the dashboard.

Remarks​

Emits the following events:


DocumentManagerProps​

Props for DocumentManager.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
formIdstringThe identifier of the form to display.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeDocumentManager>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
CANCELThe back button is selected—

Documents​

Standalone employee documents management flow.

Remarks​

Orchestrates the documents card and the per-form document manager. The flow starts on the documents card and routes to the document manager when a row's View CTA is selected; cancelling from the document manager returns to the card.


DocumentsProps​

Props for Documents.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementDocuments>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/documents/card/viewRequestedFired when a row's View CTA is clicked on the documents card{ employeeId: string; formId: string }

Endpoints​


DocumentsCard​

Standalone "Documents" (forms) card. Owns its own data fetch via useDocumentsList and renders the employee's forms in a table with a per-row "View" action. Emits employee/management/documents/card/viewRequested with { employeeId, formId } when a row's View CTA is clicked. The card is read-only — viewing or signing a form happens in the screen the parent routes to — and renders no alerts: alert rendering is the parent's responsibility.


DocumentsCardProps​

Props for DocumentsCard.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Event handler fired when a row's View CTA is clicked.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

EmployeeList​

Renders a tabbed list of a company's employees split across Active, Onboarding, and Dismissed tabs, with per-row actions tailored to each tab (edit, delete, dismiss). Dismissed rows have no available actions, so no menu is rendered for them.


ManagementEmployeeListProps​

Props for ManagementEmployeeList.

PropertyTypeDescription
companyIdstringThe associated company identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementEmployeeList>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.
initialTab?EmployeeTabTab to render first: Active, Onboarding, or Dismissed. Defaults to 'active'.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/createFired when the user clicks "Add employee".—
employee/updateFired when the user selects "Edit" on a row.{ employeeId: string }
employee/dismissFired when the user selects "Dismiss" on a row in the Active tab.{ employeeId: string }
employee/deletedFired after a row's delete action completes.{ employeeId: string }

Endpoints​


FederalTaxes​

Self-contained block for viewing and editing an employee's federal tax (W-4) withholdings — the same experience the dashboard surfaces, but as a drop-in component that doesn't require the surrounding dashboard chrome.

Remarks​

Renders a read-only card showing filing status, multiple-jobs flag, dependents, other income, deductions, and extra withholding, with an Edit CTA that swaps to the edit form. Submitting the form returns to the card; cancelling returns without saving. Wraps everything in error and suspense boundaries.

The card and form surfaces (FederalTaxesCard, FederalTaxesEditForm) are also exported individually for cases where that orchestration is the wrong fit — for example, when the form needs to render in a modal or drawer, when the card needs to appear read-only with no edit affordance, or when the swap is driven by a router. Using them directly means owning the swap and any cross-component state yourself.


FederalTaxesProps​

Props for FederalTaxes.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementFederalTaxes>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/federalTaxes/card/editRequestedFired when the card's Edit CTA is clicked; the block opens the edit form{ employeeId: string }
employee/management/federalTaxes/editForm/submittedFired after the edit form is saved; the block returns to the card viewThe updated EmployeeFederalTax entity
employee/management/federalTaxes/editForm/cancelledFired when the user cancels the edit form; the block returns to the card view—
employee/management/federalTaxes/alertDismissedFired when the user dismisses an alert above the cardnull

Endpoints​


FederalTaxesCard​

Standalone "Federal taxes" card. Owns its own data fetch via useFederalTaxesSummary and emits EMPLOYEE_MANAGEMENT_FEDERAL_TAXES_CARD_EDIT_REQUESTED when the Edit button is clicked. The card has no alert API — alert rendering (when introduced) is the orchestrator's responsibility.


FederalTaxesCardProps​

Props for FederalTaxesCard.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked when the card emits an event. See the events table on FederalTaxesCard for the available event types and payloads.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

FederalTaxesEditForm​

Standalone form for editing an employee's federal tax (W-4) withholdings — filing status, multiple-jobs flag, dependents, other income, deductions, and extra withholding.

Remarks​

Pair with FederalTaxesCard to route its employee/management/federalTaxes/card/editRequested event to this form. FederalTaxes bundles the card, this form, and the swap wiring as a single drop-in; reach for this form directly only when that orchestration is the wrong fit (for example, when the form needs to render in a modal or drawer, or when the swap is driven by a router).


FederalTaxesEditFormProps​

Props for FederalTaxesEditForm.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
defaultValues?Partial<FederalTaxesFormData>Pre-fill form values. Server data takes precedence when the employee already has values on file.
dictionary?Record<"en", DeepPartial<EmployeeManagementFederalTaxes>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/federalTaxes/editForm/submittedFired after the form is saved; use it to return to the cardThe updated EmployeeFederalTax entity
employee/management/federalTaxes/editForm/cancelledFired when the user clicks Cancel; use it to return to the card—

HomeAddress​

Standalone employee home address management flow.


HomeAddressProps​

Props for HomeAddress.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementHomeAddress>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/homeAddress/editRequestedManage button on the home address card clicked{ employeeId: string }
employee/management/homeAddress/editCancelledUser backed out of the edit form—
employee/management/homeAddress/createdA new home address was createdAPIModels.EmployeeAddress
employee/management/homeAddress/updatedAn existing home address was updatedAPIModels.EmployeeAddress
employee/management/homeAddress/deletedA home address was deletedAPIModels.EmployeeAddress

Endpoints​


HomeAddressCard​

Standalone employee home address summary card.

Remarks​

Fetches the employee's active home address and renders it alongside a Manage button.


HomeAddressCardProps​

Props for HomeAddressCard.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Event handler fired when the card's Manage button is clicked.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

Events​

EventDescriptionData
employee/management/homeAddress/editRequestedManage button clicked{ employeeId: string }

HomeAddressEditForm​

Standalone employee home address edit form for creating, updating, and deleting addresses.


HomeAddressEditFormProps​

Props for HomeAddressEditForm.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementHomeAddress>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/homeAddress/createdA new home address was createdAPIModels.EmployeeAddress
employee/management/homeAddress/updatedAn existing home address was updatedAPIModels.EmployeeAddress
employee/management/homeAddress/deletedA home address was deletedAPIModels.EmployeeAddress
employee/management/homeAddress/editCancelledUser backed out of the edit form—

PaymentMethod​

Management flow for editing an employee's payment method.

Remarks​

Orchestrates the list card, add-bank-account form, and split-paycheck form for an existing employee. Routes between steps based on user actions starting from initialState. Composed of the smaller standalone components (PaymentMethodCard, PaymentMethodBankForm, PaymentMethodSplitForm) which can also be used directly when an orchestrator other than this flow is needed.


Example​

import { EmployeeManagement } from '@gusto/embedded-react-sdk'

function MyComponent() {
return (
<EmployeeManagement.PaymentMethod
employeeId="4b3f930f-82cd-48a8-b797-798686e12e5e"
onEvent={() => {}}
/>
)
}

PaymentMethodProps​

Props for PaymentMethod.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
defaultValues?undefinedNot used — payment method management edits live data.
dictionary?Record<"en", DeepPartial<EmployeeManagementPaymentMethod>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.
initialState?"split" | "add" | "list"Step to render first: the list card, the add-account form, or the split-paycheck form. Defaults to 'list'.
isAdmin?booleanWhether the current viewer is an admin. Defaults to true.

Inherits children, className, FallbackComponent, LoaderComponent from BaseComponentInterface.


Endpoints​


PaymentMethodBankForm​

Standalone bank-account form for the management flow.

Remarks​

Renders the shared bank-account form and emits per-component scoped events when the form is submitted or cancelled. Reads its copy from the dedicated Employee.Management.PaymentMethodBankForm namespace so partner overrides on the management bank form don't leak into the onboarding form.


PaymentMethodBankFormProps​

Props for PaymentMethodBankForm.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Event handler fired on bank-form lifecycle events.
defaultValues?Partial<BankFormData>Pre-fill form values. accountType defaults to 'Checking' when not supplied.

Inherits optionalFieldsToRequire, shouldFocusError, validationMode from Omit.


Events​

EventDescriptionData
employee/management/paymentMethod/bankForm/submittedFired after the bank account is successfully createdThe created bank account
employee/management/paymentMethod/bankForm/cancelledFired when the user cancels the form—

PaymentMethodCard​

Standalone "Payment" card.

Remarks​

Owns its own data fetch and emits the management block's scoped events when the user clicks the card's CTAs or confirms a bank-account deletion. The card has no alert API — alert rendering is the orchestrator's responsibility.


PaymentMethodCardProps​

Props for PaymentMethodCard.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Event handler fired on card interactions.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

Events​

EventDescriptionData
employee/management/paymentMethod/card/addRequestedFired when the user clicks the add-account CTA—
employee/management/paymentMethod/card/splitRequestedFired when the user clicks the split-paycheck CTA—
employee/management/paymentMethod/card/bankAccountDeletedFired after a bank account is successfully deletedThe delete response payload

PaymentMethodSplitForm​

Standalone split-paycheck form for the management flow.

Remarks​

Renders the shared split-payments form and emits per-component scoped events when the form is submitted or cancelled. Reads its copy from the dedicated Employee.Management.PaymentMethodSplitForm namespace so partner overrides on the management split form don't leak into the onboarding form.


PaymentMethodSplitFormProps​

Props for PaymentMethodSplitForm.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Event handler fired on split-form lifecycle events.

Inherits optionalFieldsToRequire, shouldFocusError, validationMode from Omit.


Events​

EventDescriptionData
employee/management/paymentMethod/splitForm/submittedFired after the splits are successfully savedThe updated payment method
employee/management/paymentMethod/splitForm/cancelledFired when the user cancels the form—

PaystubsCard​

Standalone "Paystubs" card. Owns its own data fetch via usePaystubsList and renders the paginated paystubs table with a per-row PDF download action. Emits the management block's scoped events (EMPLOYEE_MANAGEMENT_PAYSTUBS_CARD_*) on download request and on download success. The card has no edit transitions and no alert API — paystubs is a read-only surface whose only action is a download side effect that opens the PDF in a new tab.


PaystubsCardProps​

Props for PaystubsCard.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Event handler fired when paystub interactions occur.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

Endpoints​


Profile​

Management surface for viewing and editing an employee's basic profile details after onboarding.

Remarks​

Drives the read-view card and edit form via an internal state machine. Emits events on the supplied onEvent handler when the user requests an edit, saves changes, or cancels.


ProfileProps​

Props for Profile.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementProfile>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/profile/editRequestedFired when the user clicks Edit on the read-view card{ employeeId: string }
employee/management/profile/updatedFired after the profile is successfully savedAPIModels.Employee
employee/management/profile/editCancelledFired when the user cancels editing—

Endpoints​


ProfileCard​

Read-only card showing an employee's basic profile details with an Edit action.

Remarks​

Standalone card that fetches its own data. Emits an event when the user clicks Edit so the parent can switch to the edit form. The card does not render success or error alerts itself — alert presentation is the surrounding surface's responsibility.


ProfileCardProps​

Props for ProfileCard.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Event handler fired when the user requests to edit the profile.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

Events​

EventDescriptionData
employee/management/profile/editRequestedFired when the user clicks the Edit button{ employeeId: string }

ProfileEditForm​

Standalone edit form for an employee's basic profile details.

Remarks​

Renders fields for first name, middle initial, last name, email, SSN, and date of birth — all required on update — and shows a success alert when the save completes. Save and Cancel both emit events so the parent can return to the read view.


ProfileEditFormProps​

Props for ProfileEditForm.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementProfile>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/profile/updatedFired after the employee profile is successfully savedAPIModels.Employee
employee/management/profile/editCancelledFired when the user clicks Cancel—

StateTaxes​

Standalone state-tax management flow for a given employee. Renders the read-only summary card and the edit form, switching between them as the partner-emitted events from StateTaxesCard and StateTaxesEditForm drive the internal state machine.


StateTaxesProps​

Props for StateTaxes.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementStateTaxes>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/stateTaxes/editRequestedEdit button on the summary card was clicked{ employeeId: string }
employee/management/stateTaxes/editCancelledCancel button on the edit form was clicked—
employee/management/stateTaxes/updatedEdit form was submitted successfully{ employeeStateTaxesList: EmployeeStateTaxesList[] }

Endpoints​


StateTaxesCard​

Standalone read-only summary card showing an employee's per-state tax withholding answers. Fetches its own data and surfaces an Edit button that emits an event for the orchestrator to swap in the edit form.

Remarks​

The Edit button is hidden when no state on record has any tax-withholding questions (e.g. states with no income tax), since there is nothing to edit.


StateTaxesCardProps​

Props for StateTaxesCard.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Event handler fired when the Edit button is clicked.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

Events​

EventDescriptionData
employee/management/stateTaxes/editRequestedEdit button was clicked{ employeeId: string }

StateTaxesEditForm​

Standalone edit screen for the state-tax management flow. Renders the shared state-tax form against the Employee.Management.StateTaxes namespace and emits scoped management events on submit and cancel, so partner copy overrides on the management namespace do not leak into the onboarding flow.


StateTaxesEditFormProps​

Props for StateTaxesEditForm.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementStateTaxes>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/stateTaxes/updatedForm was submitted successfully{ employeeStateTaxesList: EmployeeStateTaxesList[] }
employee/management/stateTaxes/editCancelledCancel button was clicked—

TerminateEmployee​

Standalone form for capturing an employee's termination details — last day of work and how to process final payroll.

Remarks​

The main termination form used inside TerminationFlow. Detects existing terminations and pre-populates for editing when one is active, or routes to the summary view (via the employee/termination/viewSummary event) when the employee is already terminated.


Example​

import { EmployeeManagement } from '@gusto/embedded-react-sdk'

function MyComponent() {
return (
<EmployeeManagement.TerminateEmployee
companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365"
employeeId="4b3f930f-82cd-48a8-b797-798686e12e5e"
onEvent={() => {}}
/>
)
}

TerminateEmployeeProps​

Props for TerminateEmployee.

PropertyTypeDescription
companyIdstringThe associated company identifier.
employeeIdstringThe employee identifier to terminate.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeTerminationsTerminateEmployee>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/termination/createdFired when a new termination is created{ employeeId: string, effectiveDate: string, payrollOption: PayrollOption }
employee/termination/updatedFired when an existing termination is updated{ employeeId: string, effectiveDate: string, payrollOption: PayrollOption }
employee/termination/doneFired when the termination form is completed{ employeeId: string, effectiveDate: string, payrollOption: PayrollOption, payrollUuid?: string }
employee/termination/viewSummaryFired when redirecting to view an existing termination{ employeeId: string, effectiveDate: string }
employee/termination/payrollCreatedFired after a dismissal-payroll period was successfully created{ payrolls: PayrollUnprocessed[] }
employee/termination/payrollFailedFired if creating a dismissal payroll fails{ employeeId: string, error: unknown }
CANCELFired when the user clicks Cancel—

Endpoints​


TerminationSummary​

Termination summary with edit, cancel, and run-payroll actions plus an offboarding checklist.

Remarks​

Displays termination details and provides actions for managing the termination. Includes an offboarding checklist covering payroll timing, tax forms, and account disconnection. The available actions depend on the termination state:

  • Edit is available when the termination date is in the future and the employee is not yet terminated. The effective date cannot be edited if it is in the past.
  • Cancel is available when the termination is still cancellable — regularPayroll or anotherWay options can be cancelled; dismissalPayroll cannot.
  • Run termination payroll is shown for the dismissalPayroll option and navigates to the dismissal payroll flow.
  • Run off-cycle payroll is shown for the anotherWay option and navigates to the off-cycle payroll creation flow.

Example​

import { EmployeeManagement } from '@gusto/embedded-react-sdk'

function MyComponent() {
return (
<EmployeeManagement.TerminationSummary
companyId="a007e1ab-3595-43c2-ab4b-af7a5af2e365"
employeeId="4b3f930f-82cd-48a8-b797-798686e12e5e"
payrollOption="dismissalPayroll"
onEvent={() => {}}
/>
)
}

TerminationSummaryProps​

Props for TerminationSummary.

PropertyTypeDescription
companyIdstringThe associated company identifier.
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeTerminationsTerminationSummary>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.
payrollOption?PayrollOptionThe selected payroll processing option. When provided, the summary surfaces a success alert confirming the action taken.
payrollUuid?stringUUID of the created off-cycle payroll (when applicable).

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/termination/editFired when user clicks to edit termination details{ employeeId: string }
employee/termination/cancelledFired when a termination is successfully cancelled{ employeeId: string, alert?: TerminationFlowAlert }
employee/termination/runPayrollFired when user clicks to run termination payroll{ employeeId: string, companyId: string, effectiveDate: string }
employee/termination/runOffCyclePayrollFired when user clicks to run an off-cycle payroll{ employeeId: string, companyId: string }

Endpoints​


WorkAddress​

Standalone employee work address management flow.


WorkAddressProps​

Props for WorkAddress.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementWorkAddress>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/workAddress/editRequestedManage button on the work address card clicked{ employeeId: string }
employee/management/workAddress/editCancelledUser backed out of the edit form—
employee/management/workAddress/createdA new work address was createdAPIModels.EmployeeWorkAddress
employee/management/workAddress/updatedAn existing work address was updatedAPIModels.EmployeeWorkAddress
employee/management/workAddress/deletedA work address was deletedAPIModels.EmployeeWorkAddress

Endpoints​


WorkAddressCard​

Standalone employee work address summary card.

Remarks​

Fetches the employee's active work address and renders it alongside a Manage button.


WorkAddressCardProps​

Props for WorkAddressCard.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Event handler fired when the card's Manage button is clicked.
LoaderComponent?LoaderComponentTypeCustom loading indicator rendered while this component's async data is fetching. Overrides the indicator configured on GustoProvider for this instance only.

Events​

EventDescriptionData
employee/management/workAddress/editRequestedManage button clicked{ employeeId: string }

WorkAddressEditForm​

Standalone employee work address edit form for creating, updating, and deleting addresses.


WorkAddressEditFormProps​

Props for WorkAddressEditForm.

PropertyTypeDescription
employeeIdstringThe associated employee identifier.
onEventOnEventType<EventType, unknown>Callback invoked each time the component emits an event — user interactions, successful API responses, step transitions, or errors. Receives the event type constant and an optional payload whose shape varies by event. See the Event Handling guide and each component's event table for the full list of emitted events.
dictionary?Record<"en", DeepPartial<EmployeeManagementWorkAddress>>Overrides for the component's i18n strings. Supply a partial object whose keys match the component's resource namespace — any omitted keys fall back to SDK defaults. See the Translation guide for details.

Inherits children, className, defaultValues, FallbackComponent, LoaderComponent from BaseComponentInterface.


Events​

EventDescriptionData
employee/management/workAddress/createdA new work address was createdAPIModels.EmployeeWorkAddress
employee/management/workAddress/updatedAn existing work address was updatedAPIModels.EmployeeWorkAddress
employee/management/workAddress/deletedA work address was deletedAPIModels.EmployeeWorkAddress
employee/management/workAddress/editCancelledUser backed out of the edit form—

Utility types​

DashboardTab​

DashboardTab = "basicDetails" | "jobAndPay" | "taxes" | "documents"


EmployeeTab​

EmployeeTab = "active" | "onboarding" | "dismissed"

The tab currently selected on EmployeeList.


PayrollOption​

PayrollOption = "dismissalPayroll" | "regularPayroll" | "anotherWay"

How an employee's final paycheck is processed during TerminationFlow.

Remarks​

  • dismissalPayroll — Run a dismissal payroll. The most guided option: the employee's last regular payroll is swapped into a dismissal payroll with the termination date as the pay-period end and a default PTO payout recommendation. A termination created with this option cannot be cancelled.
  • regularPayroll — Include the final pay in the next scheduled regular payroll. The termination can still be cancelled after the fact.
  • anotherWay — Handle final pay outside of Gusto. Triggers the off-cycle payroll creation flow and removes the employee from unprocessed future payrolls. The termination can still be cancelled after the fact.