diff --git a/.reports/embedded-react-sdk.api.md b/.reports/embedded-react-sdk.api.md
index ec9b8bde2f..a72f2822c9 100644
--- a/.reports/embedded-react-sdk.api.md
+++ b/.reports/embedded-react-sdk.api.md
@@ -3895,6 +3895,7 @@ function OffCycleReasonSelection(props: OffCycleReasonSelectionProps): JSX;
// @public
interface OffCycleReasonSelectionProps extends BaseComponentInterface<'Payroll.OffCycleReasonSelection'> {
companyId: string;
+ defaultReason?: OffCycleReason;
}
// @public
diff --git a/docs/reference/payroll/blocks.md b/docs/reference/payroll/blocks.md
index 7837a46ade..7a8cea375b 100644
--- a/docs/reference/payroll/blocks.md
+++ b/docs/reference/payroll/blocks.md
@@ -242,6 +242,7 @@ Props for the [OffCycleReasonSelection](#offcyclereasonselection) component.
| ------ | ------ | ------ |
| `companyId` | `string` | The associated company identifier. |
| `onEvent` | [`OnEventType`](../events.md#oneventtype)\<[`EventType`](../events.md#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](https://docs.gusto.com/embedded-payroll/docs/event-handling) and each component's event table for the full list of emitted events. |
+| `defaultReason?` | [`OffCycleReason`](#offcyclereason) | Pre-selected reason rendered when the form mounts. Leave unset to render with no option selected. |
| `dictionary?` | `Record`\<`"en"`, [`DeepPartial`](../Translations/index.md#deeppartial)\<[`PayrollOffCycleReasonSelection`](../Translations/index.md#payrolloffcyclereasonselection)\>\> | 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](https://docs.gusto.com/embedded-payroll/docs/translation) for details. |
_Inherits `children`, `className`, `defaultValues`, `FallbackComponent`, `LoaderComponent` from [BaseComponentInterface](../blocks.md#basecomponentinterface)._
diff --git a/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.stories.tsx b/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.stories.tsx
index b67f60317a..d6ef2e3b7d 100644
--- a/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.stories.tsx
+++ b/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.stories.tsx
@@ -1,5 +1,7 @@
+import { fn } from 'storybook/test'
import { FormWrapper } from '../../../../.storybook/helpers/FormWrapper'
import { OffCycleReasonSelectionPresentation } from './OffCycleReasonSelectionPresentation'
+import { OffCycleReasonSelection } from './OffCycleReasonSelection'
import { useI18n } from '@/i18n'
function I18nLoader({ children }: { children: React.ReactNode }) {
@@ -49,3 +51,7 @@ CorrectionSelected.decorators = [
),
]
+
+export const WithDefaultReason = () => (
+
+)
diff --git a/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.test.tsx b/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.test.tsx
index a7a4b46da2..eabe0164ce 100644
--- a/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.test.tsx
+++ b/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.test.tsx
@@ -56,6 +56,17 @@ describe('OffCycleReasonSelection', () => {
expect(radio).not.toBeChecked()
})
})
+
+ it('pre-selects the option matching defaultReason', async () => {
+ renderWithProviders()
+
+ await waitFor(() => {
+ expect(screen.getByLabelText('Bonus')).toBeInTheDocument()
+ })
+
+ expect(screen.getByLabelText('Bonus')).toBeChecked()
+ expect(screen.getByLabelText('Correction payment')).not.toBeChecked()
+ })
})
describe('selection behavior', () => {
diff --git a/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.tsx b/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.tsx
index 593ea45858..66ac1fabd8 100644
--- a/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.tsx
+++ b/src/components/Payroll/OffCycleReasonSelection/OffCycleReasonSelection.tsx
@@ -35,13 +35,13 @@ export function OffCycleReasonSelection(props: OffCycleReasonSelectionProps) {
)
}
-function Root({ dictionary }: OffCycleReasonSelectionProps) {
+function Root({ dictionary, defaultReason }: OffCycleReasonSelectionProps) {
useComponentDictionary('Payroll.OffCycleReasonSelection', dictionary)
useI18n('Payroll.OffCycleReasonSelection')
const { onEvent } = useBase()
const methods = useForm<{ reason: OffCycleReason | '' }>({
- defaultValues: { reason: '' },
+ defaultValues: { reason: defaultReason ?? '' },
})
const handleReasonChange = useCallback(
diff --git a/src/components/Payroll/OffCycleReasonSelection/types.ts b/src/components/Payroll/OffCycleReasonSelection/types.ts
index 92784562ef..7f276e879a 100644
--- a/src/components/Payroll/OffCycleReasonSelection/types.ts
+++ b/src/components/Payroll/OffCycleReasonSelection/types.ts
@@ -70,4 +70,6 @@ export interface SelectReasonPayload {
export interface OffCycleReasonSelectionProps extends BaseComponentInterface<'Payroll.OffCycleReasonSelection'> {
/** The associated company identifier. */
companyId: string
+ /** Pre-selected reason rendered when the form mounts. Leave unset to render with no option selected. */
+ defaultReason?: OffCycleReason
}