diff --git a/addons/hr_holidays/static/src/components/accrual/smart_selection_field.js b/addons/hr_holidays/static/src/components/accrual/smart_selection_field.js
new file mode 100644
index 00000000000000..8ed85fc338b822
--- /dev/null
+++ b/addons/hr_holidays/static/src/components/accrual/smart_selection_field.js
@@ -0,0 +1,30 @@
+import { SelectionField, selectionField } from "@web/views/fields/selection/selection_field";
+import { registry } from "@web/core/registry";
+
+export class YearlyDaySelectionField extends SelectionField {
+    static props = {
+        ...SelectionField.props,
+        // The name of the field that references the model whose fields will be shown to the user when using /field
+        month: { type: String },
+    };
+
+    get choices() {
+        const original_choices = super.choices;
+        const month = this.props.month;
+        const monthVal = parseInt(this.props.record.data[month]);
+        const n_days = luxon.DateTime.local(2020, monthVal).daysInMonth;
+        return original_choices.filter((option) => parseInt(option.value) <= n_days );
+    }
+}
+
+export const yearlyDaySelectionField = {
+    ...selectionField,
+    component: YearlyDaySelectionField,
+    extractProps({attrs, options}, dynamicInfo){
+        const props = selectionField.extractProps(...arguments);
+        const month = options.month;
+        return { ...props, month};
+    }
+}
+// Register the widget
+registry.category("fields").add("yearly_day_selection_field", yearlyDaySelectionField);
diff --git a/addons/hr_holidays/views/hr_leave_accrual_views.xml b/addons/hr_holidays/views/hr_leave_accrual_views.xml
index a097fdbec8f74b..fe4bedd905bda5 100644
--- a/addons/hr_holidays/views/hr_leave_accrual_views.xml
+++ b/addons/hr_holidays/views/hr_leave_accrual_views.xml
@@ -46,7 +46,7 @@
                                 </span>
                                 <span name="yearly" invisible="frequency != 'yearly'">
                                     on the
-                                    <field nolabel="1" name="yearly_day" class="o_field_accrual" required="frequency == 'yearly'" placeholder="select a day"/>
+                                    <field nolabel="1" name="yearly_day"  required="frequency == 'yearly'" placeholder="select a day" widget="yearly_day_selection_field" options="{'month': 'yearly_month'}"/>
                                     of
                                     <field nolabel="1" name="yearly_month" class="o_field_accrual" required="frequency == 'yearly'" placeholder="select a month"/>
                                 </span>