diff --git a/src/DatePicker/DatePickerInput.svelte b/src/DatePicker/DatePickerInput.svelte
index 0ceebea6..92855bcd 100644
--- a/src/DatePicker/DatePickerInput.svelte
+++ b/src/DatePicker/DatePickerInput.svelte
@@ -116,7 +116,8 @@
         : $inputValue}"
       class:bx--date-picker__input="{true}"
       class:bx--date-picker__input--invalid="{invalid}"
-      class="{size && `bx--date-picker__input--${size}`}"
+      class:bx--date-picker__input--sm="{size === 'sm'}"
+      class:bx--date-picker__input--xl="{size === 'xl'}"
       on:input
       on:input="{({ target }) => {
         updateValue({ type: 'input', value: target.value });