diff --git a/src/components/Dropdown.tsx b/src/components/Dropdown.tsx
index a8c8ea1..66b485b 100644
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -4,6 +4,7 @@ import { isDev } from '../config';
 import { classNames } from '../utils';
 import { Button } from './Button';
 import { Icon } from './Icon';
+import { Input } from './Input';
 
 export interface DropdownOption {
   value: string | number;
@@ -120,10 +121,10 @@ export function Dropdown<T extends DropdownOption>({
           {/* dropdown content */}
           <div className="dropdown-content rounded-box bg-base-100 max-w-60 p-2 shadow-2xl">
             {filterable && (
-              <input
-                type="text"
+              <Input
+                className="input-sm w-full focus:outline-base-content/30 p-2 mb-2"
+                variant="input"
                 placeholder={t('dropdown.searchPlaceholder', { entity })}
-                className="input input-sm w-full focus:outline-base-content/30 p-2 mb-2"
                 value={filter}
                 onChange={(e) => setFilter(e.target.value)}
                 autoFocus
diff --git a/src/components/Input.tsx b/src/components/Input.tsx
new file mode 100644
index 0000000..1394dd9
--- /dev/null
+++ b/src/components/Input.tsx
@@ -0,0 +1,53 @@
+import { cva, VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+import { cn } from '../utils';
+
+const inputVariants = cva('', {
+  variants: {
+    variant: {
+      text: '',
+      file: '',
+      input: 'input',
+      bordered: 'input input-bordered',
+      toggle: 'toggle',
+      range: 'range',
+    },
+    size: {},
+  },
+});
+
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> &
+  VariantProps<typeof inputVariants>;
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, variant, size, ...props }, ref) => {
+    let type = props.type;
+    if (!type) {
+      switch (variant) {
+        case 'file':
+          type = 'file';
+          break;
+        case 'toggle':
+          type = 'checkbox';
+          break;
+        case 'range':
+          type = 'range';
+          break;
+        default:
+          type = 'text';
+      }
+    }
+
+    return (
+      <input
+        className={cn(inputVariants({ variant, size, className }))}
+        ref={ref}
+        type={type}
+        {...props}
+      />
+    );
+  }
+);
+Input.displayName = 'Input';
+
+export { Input };
diff --git a/src/components/index.tsx b/src/components/index.tsx
index 20b4c44..132df04 100644
--- a/src/components/index.tsx
+++ b/src/components/index.tsx
@@ -3,6 +3,7 @@ export * from './Dropdown';
 export * from './Footer';
 export * from './Header';
 export * from './Icon';
+export * from './Input';
 export * from './Label';
 export * from './Sidebar';
 export * from './Textarea';
diff --git a/src/pages/Chat/components/DropzoneArea.tsx b/src/pages/Chat/components/DropzoneArea.tsx
index 6230b08..c25088d 100644
--- a/src/pages/Chat/components/DropzoneArea.tsx
+++ b/src/pages/Chat/components/DropzoneArea.tsx
@@ -1,5 +1,6 @@
 import { ClipboardEvent, useState } from 'react';
 import Dropzone from 'react-dropzone';
+import { Input } from '../../../components';
 import { FileUploadApi } from '../../../hooks/useFileUpload';
 import { useAppContext } from '../../../store/app';
 import { classNames } from '../../../utils';
@@ -73,9 +74,9 @@ export function DropzoneArea({
           }}
           {...getRootProps()}
         >
-          <input
+          <Input
             id={inputId}
-            type="file"
+            variant="file"
             disabled={disabled}
             {...getInputProps()}
             hidden
diff --git a/src/pages/Settings/components/ImportExportComponent.tsx b/src/pages/Settings/components/ImportExportComponent.tsx
index 94c47ca..5f7768f 100644
--- a/src/pages/Settings/components/ImportExportComponent.tsx
+++ b/src/pages/Settings/components/ImportExportComponent.tsx
@@ -1,7 +1,7 @@
 import { useTranslation } from 'react-i18next';
 import { TbDatabaseExport, TbDatabaseImport } from 'react-icons/tb';
 import { DelimeterComponent, SettingsSectionLabel } from '.';
-import { Button, Icon, Label } from '../../../components';
+import { Button, Icon, Input, Label } from '../../../components';
 import { useAppContext } from '../../../store/app';
 import { normalizeUrl } from '../../../utils';
 import { downloadAsFile } from '../../../utils/downloadAsFile';
@@ -47,9 +47,9 @@ export function ImportExportComponent({ onClose }: { onClose: () => void }) {
           {t('settings.importExport.exportBtnLabel')}
         </Button>
 
-        <input
+        <Input
           id="file-import"
-          type="file"
+          variant="file"
           accept=".json"
           onInput={onImport}
           hidden
diff --git a/src/pages/Settings/components/common.tsx b/src/pages/Settings/components/common.tsx
index 7040f13..7f9d704 100644
--- a/src/pages/Settings/components/common.tsx
+++ b/src/pages/Settings/components/common.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
-import { Dropdown, Label, TextArea } from '../../../components';
+import { Dropdown, Input, Label, TextArea } from '../../../components';
 import { CONFIG_DEFAULT } from '../../../config';
 import { DropdownOption, SettingFieldInput } from '../../../types/settings';
 import { normalizeUrl } from '../../../utils';
@@ -87,8 +87,7 @@ export function SettingsModalShortInput({
             >
               {label}
             </div>
-            <input
-              type="text"
+            <Input
               className="grow"
               placeholder={`Default: ${CONFIG_DEFAULT[field.key] || 'none'}`}
               value={value}
@@ -147,9 +146,9 @@ export function SettingsModalRangeInput({
               {label}
             </div>
             <div className="grow px-2">
-              <input
-                type="range"
-                className="range range-xs [--range-fill:0]"
+              <Input
+                className="range-xs [--range-fill:0]"
+                variant="range"
                 min={min}
                 max={max}
                 step={step}
@@ -186,9 +185,8 @@ export function SettingsModalCheckbox({
       {({ label, note }) => (
         <Label variant="form-control">
           <div className="flex flex-row items-center mb-1">
-            <input
-              type="checkbox"
-              className="toggle"
+            <Input
+              variant="toggle"
               checked={value}
               onChange={(e) => onChange(e.target.checked)}
               disabled={field.disabled}
diff --git a/src/store/modal.tsx b/src/store/modal.tsx
index 6ccfa7b..0563367 100644
--- a/src/store/modal.tsx
+++ b/src/store/modal.tsx
@@ -6,7 +6,7 @@ import React, {
   useRef,
 } from 'react';
 import { Trans } from 'react-i18next';
-import { Button } from '../components';
+import { Button, Input } from '../components';
 
 enum ModalActionType {
   SHOW_MODAL = 'SHOW_MODAL',
@@ -184,9 +184,9 @@ export function ModalProvider({ children }: { children: React.ReactNode }) {
         <dialog className="modal modal-open z-[1100]">
           <div className="modal-box">
             <h3 className="font-bold text-lg">{state.prompt.message}</h3>
-            <input
-              type="text"
-              className="input input-bordered w-full mt-2"
+            <Input
+              className="w-full mt-2"
+              variant="bordered"
               defaultValue={state.prompt.defaultValue}
               ref={inputRef}
               onKeyDown={(e) => {