diff --git a/packages/raystack/components/filter-chip/filter-chip.tsx b/packages/raystack/components/filter-chip/filter-chip.tsx
index 25c8d17af..170a8f3a7 100644
--- a/packages/raystack/components/filter-chip/filter-chip.tsx
+++ b/packages/raystack/components/filter-chip/filter-chip.tsx
@@ -139,7 +139,7 @@ export const FilterChip = ({
               value={filterValue}
               onSelect={date => handleFilterValueChange(date)}
               showCalendarIcon={false}
-              inputProps={{ className: styles.dateField }}
+              inputProps={{ classNames: { container: styles.dateField } }}
             />
           </div>
         );
@@ -148,7 +148,7 @@ export const FilterChip = ({
           <div className={styles.inputFieldWrapper}>
             <Input
               variant={variant === 'text' ? 'borderless' : 'default'}
-              className={styles.inputField}
+              classNames={{ container: styles.inputField }}
               value={filterValue}
               onChange={e => handleFilterValueChange(e.target.value)}
             />
diff --git a/packages/raystack/components/input/input.tsx b/packages/raystack/components/input/input.tsx
index edccca5b7..d5b7c5b8c 100644
--- a/packages/raystack/components/input/input.tsx
+++ b/packages/raystack/components/input/input.tsx
@@ -35,6 +35,7 @@ export interface InputProps
   maxChipsVisible?: number;
   variant?: 'default' | 'borderless';
   containerRef?: RefObject<HTMLDivElement | null>;
+  classNames?: { container?: string };
 }
 
 export function Input({
@@ -51,6 +52,7 @@ export function Input({
   size,
   variant = 'default',
   containerRef,
+  classNames,
   required,
   ...props
 }: InputProps) {
@@ -61,7 +63,8 @@ export function Input({
     <div
       className={cx(
         inputWrapper({ size, variant }),
-        chips?.length && styles['has-chips']
+        chips?.length && styles['has-chips'],
+        classNames?.container
       )}
       data-disabled={disabled || undefined}
       style={{ width: width || '100%' }}