diff --git a/packages/core/src/Lib/UseFloatingLabel/Internal/Lib/UseFloatingLabel.ts b/packages/core/src/Lib/UseFloatingLabel/Internal/Lib/UseFloatingLabel.ts
index 5e9cbe80..f8584118 100644
--- a/packages/core/src/Lib/UseFloatingLabel/Internal/Lib/UseFloatingLabel.ts
+++ b/packages/core/src/Lib/UseFloatingLabel/Internal/Lib/UseFloatingLabel.ts
@@ -5,18 +5,19 @@ import { useClass }                           from '@/Lib/UseClass/Internal';
 import { computed, toValue }                  from 'vue';
 
 export function useFloatingLabel(
-    elementName: MaybeRefOrGetter<FloatingLabelComponentName>,
+    componentName: MaybeRefOrGetter<FloatingLabelComponentName>,
     labelType: MaybeRefOrGetter<LabelType | undefined>,
 ): ComputedRef<string> {
     return computed(() => {
         const isFloating = toValue(labelType) === 'floating';
 
         const classes: Record<FloatingLabelComponentName, ComputedRef<string>> = {
+            FoInputFile: useClass(isFloating, 'input-floating'),
             FoInputText: useClass(isFloating, 'input-floating'),
             FoSelect:    useClass(isFloating, 'select-floating'),
             FoTextarea:  useClass(isFloating, 'textarea-floating'),
         };
 
-        return classes[toValue(elementName)].value;
+        return classes[toValue(componentName)].value;
     });
 }
diff --git a/packages/core/src/Lib/UseFloatingLabel/Types/FloatingLabel.ts b/packages/core/src/Lib/UseFloatingLabel/Types/FloatingLabel.ts
index 2c08611c..618869a7 100644
--- a/packages/core/src/Lib/UseFloatingLabel/Types/FloatingLabel.ts
+++ b/packages/core/src/Lib/UseFloatingLabel/Types/FloatingLabel.ts
@@ -1,3 +1,4 @@
 import type { ComponentName } from '@/Lib';
 
-export type FloatingLabelComponentName = Extract<ComponentName, 'FoInputText' | 'FoSelect' | 'FoTextarea'>;
+// todo: there is a mismatch between configurable and floating, this should be checked
+export type FloatingLabelComponentName = Extract<ComponentName, 'FoInputFile' | 'FoInputText' | 'FoSelect' | 'FoTextarea'>;
diff --git a/packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/ComponentName.ts b/packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/ComponentName.ts
index 6406f347..42fc5d6b 100644
--- a/packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/ComponentName.ts
+++ b/packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/ComponentName.ts
@@ -8,6 +8,7 @@ type NonConfigurableComponentName = 'FoAvatarGroup'
     | 'FoDiff'
     | 'FoDotStyleBadge'
     | 'FoJoin'
+    | 'FoImageRadio'
     | 'FoLabel'
     | 'FoListGroup'
     | 'FoListGroupItem'
diff --git a/packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/FlyonUIVueAppConfig.ts b/packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/FlyonUIVueAppConfig.ts
index e62cfb5c..0151f468 100644
--- a/packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/FlyonUIVueAppConfig.ts
+++ b/packages/core/src/Lib/UseFlyonUIVueAppConfig/Types/FlyonUIVueAppConfig.ts
@@ -20,6 +20,7 @@ import type { HeadingProps, KeyboardProps, LinkProps }
 import type { DividerProps }                                                           from '@/UI/Content/Divider';
 import type { IconProps }                                                              from '@/UI/Customization';
 import type { CheckboxProps, InputTextProps, SelectProps, SwitchProps, TextareaProps } from '@/UI/Forms';
+import type { InputFileProps }                                                         from '@/UI/Forms/InputFile';
 import type { RadioProps }                                                             from '@/UI/Forms/Radio';
 import type { RangeProps }                                                             from '@/UI/Forms/Range';
 import type { TabProps, TabsProps }                                                    from '@/UI/Navigations';
@@ -113,6 +114,11 @@ export interface ConfigurableComponentProps {
     FoDivider:   ConfigurableProps<DividerProps>;
     FoHeading:   ConfigurableProps<HeadingProps>;
     FoIcon:      ConfigurableProps<IconProps>;
+    FoInputFile: ConfigurableProps<
+        InputFileProps
+        & HorizontalPositionComponentConfig<HorizontalHelperTextPositionConfig>
+        & LabelTypeComponentConfig
+    >;
     FoInputText: ConfigurableProps<
         InputTextProps
         & HorizontalPositionComponentConfig<HorizontalPositionGlobalConfig>
diff --git a/packages/core/src/Lib/UseSize/Internal/Lib/UseSize.ts b/packages/core/src/Lib/UseSize/Internal/Lib/UseSize.ts
index d91e1632..032a4c1b 100644
--- a/packages/core/src/Lib/UseSize/Internal/Lib/UseSize.ts
+++ b/packages/core/src/Lib/UseSize/Internal/Lib/UseSize.ts
@@ -40,6 +40,13 @@ export function useSize(
                 large:      'checkbox-lg',
                 extraLarge: 'checkbox-xl',
             },
+            FoInputFile: {
+                extraSmall: 'input-xs',
+                small:      'input-sm',
+                medium:     '',
+                large:      'input-lg',
+                extraLarge: 'input-xl',
+            },
             FoInputText: {
                 extraSmall: 'input-xs',
                 small:      'input-sm',
diff --git a/packages/core/src/Lib/UseSize/Types/Size.ts b/packages/core/src/Lib/UseSize/Types/Size.ts
index 8bd6f09f..28fd554f 100644
--- a/packages/core/src/Lib/UseSize/Types/Size.ts
+++ b/packages/core/src/Lib/UseSize/Types/Size.ts
@@ -6,6 +6,7 @@ export type SizableComponentName = Extract<
     | 'FoBadge'
     | 'FoButton'
     | 'FoCheckbox'
+    | 'FoInputFile'
     | 'FoInputText'
     | 'FoKeyboard'
     | 'FoLoading'
diff --git a/packages/core/src/UI/Components/HelperText/Types/HelperText.ts b/packages/core/src/UI/Components/HelperText/Types/HelperText.ts
index abeaf35e..06b63359 100644
--- a/packages/core/src/UI/Components/HelperText/Types/HelperText.ts
+++ b/packages/core/src/UI/Components/HelperText/Types/HelperText.ts
@@ -1,7 +1,7 @@
 import type { ComponentName }      from '@/Lib';
 import type { HorizontalPosition } from '@/Types';
 
-export type PositionableHelperTextComponentName = Extract<ComponentName, 'FoInputText' | 'FoSelect' | 'FoTextarea'>;
+export type PositionableHelperTextComponentName = Extract<ComponentName, 'FoInputFile' | 'FoInputText' | 'FoSelect' | 'FoTextarea'>;
 
 export type HelperText = string;
 
diff --git a/packages/core/src/UI/Components/Label/Internal/Types/Label.ts b/packages/core/src/UI/Components/Label/Internal/Types/Label.ts
index 5b520e3a..93984290 100644
--- a/packages/core/src/UI/Components/Label/Internal/Types/Label.ts
+++ b/packages/core/src/UI/Components/Label/Internal/Types/Label.ts
@@ -1,7 +1,13 @@
 import type { ComponentName, FloatingLabelComponentName, MaybeStringId } from '@/Lib';
 import type { LabelType }                                                from '@/UI/Components';
 
-export type ConfigurableLabelComponentName = Extract<ComponentName, 'FoInputText' | 'FoSelect' | 'FoTextarea'>;
+export type ConfigurableLabelComponentName = Extract<
+    ComponentName,
+    'FoInputFile'
+    | 'FoInputText'
+    | 'FoSelect'
+    | 'FoTextarea'
+>;
 
 export interface LabelProps<T extends LabelType = LabelType> extends MaybeStringId {
     componentName?: FloatingLabelComponentName;
diff --git a/packages/core/src/UI/Components/Label/Internal/UI/FoLabel.vue b/packages/core/src/UI/Components/Label/Internal/UI/FoLabel.vue
index d7659c02..a8cfdf6b 100644
--- a/packages/core/src/UI/Components/Label/Internal/UI/FoLabel.vue
+++ b/packages/core/src/UI/Components/Label/Internal/UI/FoLabel.vue
@@ -46,6 +46,11 @@ const labelClass = computed((): string => {
     }
 
     const classes: Record<FloatingLabelComponentName, Record<LabelType, string>> = {
+        FoInputFile: {
+            text:     'label-text',
+            floating: 'input-floating-label',
+            inline:   '',
+        },
         FoInputText: {
             text:     'label-text',
             floating: 'input-floating-label',
diff --git a/packages/core/src/UI/Forms/InputFile/Types/InputFile.ts b/packages/core/src/UI/Forms/InputFile/Types/InputFile.ts
new file mode 100644
index 00000000..85bc9f9e
--- /dev/null
+++ b/packages/core/src/UI/Forms/InputFile/Types/InputFile.ts
@@ -0,0 +1,11 @@
+import type { Disableable, MaybeStringId, Sizable, Validity }                     from '@/Lib';
+import type { LabelType, WithConfigurableHelperText, WithConfigurableInputLabel } from '@/UI/Components';
+
+export type InputFileLabelType = Extract<LabelType, 'text' | 'floating'>;
+
+export type InputFileProps = MaybeStringId
+    & Disableable
+    & Sizable
+    & WithConfigurableInputLabel<InputFileLabelType>
+    & Validity
+    & WithConfigurableHelperText;
diff --git a/packages/core/src/UI/Forms/InputFile/Types/index.ts b/packages/core/src/UI/Forms/InputFile/Types/index.ts
new file mode 100644
index 00000000..52bb32d0
--- /dev/null
+++ b/packages/core/src/UI/Forms/InputFile/Types/index.ts
@@ -0,0 +1 @@
+export * from '@/UI/Forms/InputFile/Types/InputFile';
diff --git a/packages/core/src/UI/Forms/InputFile/UI/FoInputFile.vue b/packages/core/src/UI/Forms/InputFile/UI/FoInputFile.vue
new file mode 100644
index 00000000..8f56b65d
--- /dev/null
+++ b/packages/core/src/UI/Forms/InputFile/UI/FoInputFile.vue
@@ -0,0 +1,33 @@
+<template>
+    <FoInputFiles v-bind="props"
+                  :multiple="false"
+                  @upload:files="uploadFile"
+    />
+</template>
+
+<script setup lang="ts">
+import type { InputFileProps } from '@/UI/Forms';
+import { FoInputFiles  }       from '@/UI/Forms';
+
+const props = withDefaults(defineProps<InputFileProps>(), {
+    isValid: undefined,
+});
+
+const emit = defineEmits<{
+    (e: 'upload:file', file: File): void;
+}>();
+
+function uploadFile(files: FileList): void {
+    const file = files.item(0);
+
+    if (file === null) {
+        throw new Error('Received an upload file event but no file has been uploaded.');
+    }
+
+    if (files.length > 1) {
+        throw new Error('Received an upload file event with multiple files.');
+    }
+
+    emit('upload:file', file);
+}
+</script>
diff --git a/packages/core/src/UI/Forms/InputFile/UI/FoInputFiles.vue b/packages/core/src/UI/Forms/InputFile/UI/FoInputFiles.vue
new file mode 100644
index 00000000..92b32821
--- /dev/null
+++ b/packages/core/src/UI/Forms/InputFile/UI/FoInputFiles.vue
@@ -0,0 +1,102 @@
+<template>
+    <div :class="floatingLabelClass"
+         :style="$attrs.style as StyleValue"
+    >
+        <FoLabel v-if="defaultLabel?.type === 'text'"
+                 :for="id"
+                 :component-name="componentName"
+                 type="text"
+                 :is-hidden="defaultLabel.isHidden"
+        >
+            {{ defaultLabel.text }}
+        </FoLabel>
+
+        <input :id="id"
+               type="file"
+               class="input"
+               :class="[sizeClass, validityClass]"
+               :disabled="isDisabled"
+               multiple
+               v-bind="reactiveOmit($attrs, 'style')"
+               @change="change"
+        >
+
+        <FoLabel v-if="defaultLabel?.type === 'floating'"
+                 :for="id"
+                 :component-name="componentName"
+                 type="floating"
+                 :is-hidden="defaultLabel.isHidden"
+        >
+            {{ defaultLabel.text }}
+        </FoLabel>
+
+        <FoHelperText v-if="inputFileHelperText !== undefined"
+                      :position="inputFileHelperText.position"
+        >
+            {{ inputFileHelperText.text }}
+        </FoHelperText>
+    </div>
+</template>
+
+<script setup lang="ts">
+import type { ComponentName }                      from '@/Lib';
+import type { InputFileProps }                     from '@/UI/Forms/InputFile';
+import type { StyleValue }                         from 'vue';
+import { useFlyonUIVueAppConfig }                  from '@/Lib';
+import { useFloatingLabel }                        from '@/Lib/UseFloatingLabel/Internal';
+import { useElementId }                            from '@/Lib/UseIdentifiable/Internal';
+import { useSize }                                 from '@/Lib/UseSize/Internal';
+import { useValidity }                             from '@/Lib/UseValidity/Internal';
+import { FoHelperText, usePositionableHelperText } from '@/UI/Components/HelperText/Internal';
+import { FoLabel, useLabel }                       from '@/UI/Components/Label/Internal';
+import { reactiveOmit }                            from '@vueuse/core';
+
+defineOptions({
+    inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<InputFileProps>(), {
+    isValid: undefined,
+});
+
+const emit = defineEmits<{
+    (e: 'upload:files', files: FileList): void;
+}>();
+
+const componentName: ComponentName = 'FoInputFile';
+const { config }                   = useFlyonUIVueAppConfig();
+
+const id = useElementId(() => props.id);
+
+const defaultLabel = useLabel(
+    config,
+    componentName,
+    () => props.label,
+);
+
+const inputFileHelperText = usePositionableHelperText(
+    config,
+    componentName,
+    () => props.helperText,
+);
+
+const [
+    floatingLabelClass,
+    sizeClass,
+    validityClass,
+] = [
+    useFloatingLabel(componentName, () => defaultLabel.value?.type),
+    useSize(config, componentName, () => props.size),
+    useValidity(() => props.isValid),
+];
+
+function change(event: Event): void {
+    const target = event.target;
+
+    if (target instanceof HTMLInputElement === false || target.files === null) {
+        throw new TypeError('The event does not come from an input element.');
+    }
+
+    emit('upload:files', target.files);
+}
+</script>
diff --git a/packages/core/src/UI/Forms/InputFile/UI/index.ts b/packages/core/src/UI/Forms/InputFile/UI/index.ts
new file mode 100644
index 00000000..dcd1afd9
--- /dev/null
+++ b/packages/core/src/UI/Forms/InputFile/UI/index.ts
@@ -0,0 +1,2 @@
+export { default as FoInputFile } from '@/UI/Forms/InputFile/UI/FoInputFile.vue';
+export { default as FoInputFiles } from '@/UI/Forms/InputFile/UI/FoInputFiles.vue';
diff --git a/packages/core/src/UI/Forms/InputFile/index.ts b/packages/core/src/UI/Forms/InputFile/index.ts
new file mode 100644
index 00000000..a40b7565
--- /dev/null
+++ b/packages/core/src/UI/Forms/InputFile/index.ts
@@ -0,0 +1,2 @@
+export * from '@/UI/Forms/InputFile/Types';
+export * from '@/UI/Forms/InputFile/UI';
diff --git a/packages/core/src/UI/Forms/Select/UI/FoSelect.vue b/packages/core/src/UI/Forms/Select/UI/FoSelect.vue
index eddd8414..6c312092 100644
--- a/packages/core/src/UI/Forms/Select/UI/FoSelect.vue
+++ b/packages/core/src/UI/Forms/Select/UI/FoSelect.vue
@@ -3,7 +3,7 @@
     <div v-if="options.length"
          :class="[
              icon && useIcon && 'select',
-             icon === undefined && defaultLabel?.type === 'floating' && floatingLabelClass,
+             icon === undefined && floatingLabelClass,
          ]"
     >
         <FoIcon v-if="icon && useIcon"
@@ -25,7 +25,7 @@
                 v-model="selectedOption"
                 class="select"
                 :class="[
-                    icon === undefined && defaultLabel?.type === 'floating' && floatingLabelClass,
+                    icon === undefined && floatingLabelClass,
                     shapeClass,
                     sizeClass,
                     validityClass,
diff --git a/packages/core/src/UI/Forms/index.ts b/packages/core/src/UI/Forms/index.ts
index 96464654..80c2bef2 100644
--- a/packages/core/src/UI/Forms/index.ts
+++ b/packages/core/src/UI/Forms/index.ts
@@ -1,4 +1,5 @@
 export * from '@/UI/Forms/Checkbox';
+export * from '@/UI/Forms/InputFile';
 export * from '@/UI/Forms/InputText';
 export * from '@/UI/Forms/Join';
 export * from '@/UI/Forms/Radio';
diff --git a/packages/docs/.vitepress/theme/Components/Layout/Features/Sidebar/Lib/UseSidebarItems.ts b/packages/docs/.vitepress/theme/Components/Layout/Features/Sidebar/Lib/UseSidebarItems.ts
index d0a19de6..7bde6ce5 100644
--- a/packages/docs/.vitepress/theme/Components/Layout/Features/Sidebar/Lib/UseSidebarItems.ts
+++ b/packages/docs/.vitepress/theme/Components/Layout/Features/Sidebar/Lib/UseSidebarItems.ts
@@ -220,6 +220,13 @@ export function useSidebarItems(): ComputedRef<SidebarItem[]> {
                         icon:     'mdi:checkbox-marked',
                         children: [],
                     },
+                    {
+                        text:     'Input File',
+                        to:       `${flyonUIVueNextPath}/forms/input-file`,
+                        icon:     'mdi:file-upload',
+                        children: [],
+                        badge:    _unreleasedBadge,
+                    },
                     {
                         text:     'Input Text',
                         to:       '/forms/input-text',
diff --git a/packages/docs/.vitepress/theme/index.ts b/packages/docs/.vitepress/theme/index.ts
index 89293116..0b495f64 100644
--- a/packages/docs/.vitepress/theme/index.ts
+++ b/packages/docs/.vitepress/theme/index.ts
@@ -37,6 +37,7 @@ import SkeletonDocs                                   from '@/Next/Components/Sk
 import StatusDocs                                     from '@/Next/Components/Status/StatusDocs.vue';
 import BlockQuoteDocs                                 from '@/Next/Content/BlockQuote/BlockQuoteDocs.vue';
 import DividerDocs                                    from '@/Next/Content/Divider/DividerDocs.vue';
+import InputFileDocs                                  from '@/Next/Forms/InputFile/InputFileDocs.vue';
 import RadioDocs                                      from '@/Next/Forms/Radio/RadioDocs.vue';
 import RangeDocs                                      from '@/Next/Forms/Range/RangeDocs.vue';
 import DataTableDocs                                  from '@/Next/Tables/DataTable/DataTableDocs.vue';
@@ -100,6 +101,7 @@ export default {
             { name: 'DataTableDocs', instance: DataTableDocs },
             { name: 'DiffDocs', instance: DiffDocs },
             { name: 'DividerDocs', instance: DividerDocs },
+            { name: 'InputFileDocs', instance: InputFileDocs },
             { name: 'InputTextDocs', instance: InputTextDocs },
             { name: 'IconsDocs', instance: IconsDocs },
             { name: 'JoinDocs', instance: JoinDocs },
diff --git a/packages/docs/Next/Forms/InputFile.md b/packages/docs/Next/Forms/InputFile.md
new file mode 100644
index 00000000..f3770ef8
--- /dev/null
+++ b/packages/docs/Next/Forms/InputFile.md
@@ -0,0 +1,41 @@
+# Input file
+
+### Default
+
+<InputFileDocs section="default" />
+
+### Labels
+
+<InputFileDocs section="label" />
+
+### Sizes
+
+<InputFileDocs section="size" />
+
+### Validation states
+
+<InputFileDocs section="validation-state" />
+
+## Illustrations
+
+### Disabled
+
+<InputFileDocs section="disabled" />
+
+### Helper text
+
+<InputFileDocs section="helper-text" />
+
+### Multiple files
+
+<InputFileDocs section="multiple-files" />
+
+## Api
+
+### Props
+
+<InputFileDocs section="props" />
+
+### Slots
+
+<InputFileDocs section="slots" />
diff --git a/packages/docs/Next/Forms/InputFile/DefaultInputFile.vue b/packages/docs/Next/Forms/InputFile/DefaultInputFile.vue
new file mode 100644
index 00000000..7905b3b2
--- /dev/null
+++ b/packages/docs/Next/Forms/InputFile/DefaultInputFile.vue
@@ -0,0 +1,10 @@
+<template>
+    <FoInputFile @upload:file="file = $event" />
+</template>
+
+<script setup lang="ts">
+import { FoInputFile } from 'flyonui-vue';
+import { ref }         from 'vue';
+
+const file = ref<File | null>(null);
+</script>
diff --git a/packages/docs/Next/Forms/InputFile/DisabledInputFile.vue b/packages/docs/Next/Forms/InputFile/DisabledInputFile.vue
new file mode 100644
index 00000000..651757e5
--- /dev/null
+++ b/packages/docs/Next/Forms/InputFile/DisabledInputFile.vue
@@ -0,0 +1,12 @@
+<template>
+    <FoInputFile is-disabled
+                 @upload:file="file = $event"
+    />
+</template>
+
+<script setup lang="ts">
+import { FoInputFile } from 'flyonui-vue';
+import { ref }         from 'vue';
+
+const file = ref<File | null>(null);
+</script>
diff --git a/packages/docs/Next/Forms/InputFile/InputFileDocs.vue b/packages/docs/Next/Forms/InputFile/InputFileDocs.vue
new file mode 100644
index 00000000..ace2eaa0
--- /dev/null
+++ b/packages/docs/Next/Forms/InputFile/InputFileDocs.vue
@@ -0,0 +1,99 @@
+<template>
+    <ComponentDocs :previews="previews"
+                   :section="section"
+                   api-docs-component-names="FoInputFile"
+    />
+</template>
+
+<script setup lang="ts">
+import type { ComponentDocsPreview } from '@/.vitepress/theme/Components/ComponentDocs/Types/ComponentDocs';
+import type { ApiType }              from '@/Api/Types/Api.ts';
+import type { Default }              from 'flyonui-vue';
+import ComponentDocs                 from '@/.vitepress/theme/Components/ComponentDocs/UI/ComponentDocs.vue';
+import DefaultInputFile              from '@/Next/Forms/InputFile/DefaultInputFile.vue';
+import DefaultInputFileRaw           from '@/Next/Forms/InputFile/DefaultInputFile.vue?raw';
+import DisabledInputFile             from '@/Next/Forms/InputFile/DisabledInputFile.vue';
+import DisabledInputFileRaw          from '@/Next/Forms/InputFile/DisabledInputFile.vue?raw';
+import InputFileHelperText           from '@/Next/Forms/InputFile/InputFileHelperText.vue';
+import InputFileHelperTextRaw        from '@/Next/Forms/InputFile/InputFileHelperText.vue?raw';
+import InputFileLabel                from '@/Next/Forms/InputFile/InputFileLabel.vue';
+import InputFileLabelRaw             from '@/Next/Forms/InputFile/InputFileLabel.vue?raw';
+import InputFileSize                 from '@/Next/Forms/InputFile/InputFileSize.vue';
+import InputFileSizeRaw              from '@/Next/Forms/InputFile/InputFileSize.vue?raw';
+import InputFileValidationState      from '@/Next/Forms/InputFile/InputFileValidationState.vue';
+import InputFileValidationStateRaw   from '@/Next/Forms/InputFile/InputFileValidationState.vue?raw';
+import MultipleFilesInputFile        from '@/Next/Forms/InputFile/MultipleFilesInputFile.vue';
+import MultipleFilesInputFileRaw     from '@/Next/Forms/InputFile/MultipleFilesInputFile.vue?raw';
+import { computed }                  from 'vue';
+
+type Section = Default
+    | 'label'
+    | 'size'
+    | 'validation-state'
+    | 'disabled'
+    | 'helper-text'
+    | 'multiple-files'
+    | ApiType;
+
+interface Props {
+    section: Section;
+}
+
+defineProps<Props>();
+
+const previews = computed(() => {
+    return new Map<Section, ComponentDocsPreview>([
+        [
+            'default',
+            {
+                code:      DefaultInputFileRaw,
+                component: DefaultInputFile,
+            },
+        ],
+        [
+            'label',
+            {
+                code:      InputFileLabelRaw,
+                component: InputFileLabel,
+            },
+        ],
+        [
+            'size',
+            {
+                code:      InputFileSizeRaw,
+                component: InputFileSize,
+                grid:      { rows: 5, columns: 1 },
+            },
+        ],
+        [
+            'validation-state',
+            {
+                code:      InputFileValidationStateRaw,
+                component: InputFileValidationState,
+            },
+        ],
+        [
+            'disabled',
+            {
+                code:      DisabledInputFileRaw,
+                component: DisabledInputFile,
+            },
+        ],
+        [
+            'helper-text',
+            {
+                code:      InputFileHelperTextRaw,
+                component: InputFileHelperText,
+                grid:      { rows: 2, columns: 1 },
+            },
+        ],
+        [
+            'multiple-files',
+            {
+                code:      MultipleFilesInputFileRaw,
+                component: MultipleFilesInputFile,
+            },
+        ],
+    ]);
+});
+</script>
diff --git a/packages/docs/Next/Forms/InputFile/InputFileHelperText.vue b/packages/docs/Next/Forms/InputFile/InputFileHelperText.vue
new file mode 100644
index 00000000..689ab5dc
--- /dev/null
+++ b/packages/docs/Next/Forms/InputFile/InputFileHelperText.vue
@@ -0,0 +1,18 @@
+<template>
+    <FoInputFile label="Pick a file"
+                 :helper-text="{ text: 'Helper text', position: 'left' }"
+                 @upload:file="file = $event"
+    />
+
+    <FoInputFile label="Pick a file"
+                 :helper-text="{ text: 'Helper text', position: 'right' }"
+                 @upload:file="file = $event"
+    />
+</template>
+
+<script setup lang="ts">
+import { FoInputFile } from 'flyonui-vue';
+import { ref }         from 'vue';
+
+const file = ref<File | null>(null);
+</script>
diff --git a/packages/docs/Next/Forms/InputFile/InputFileLabel.vue b/packages/docs/Next/Forms/InputFile/InputFileLabel.vue
new file mode 100644
index 00000000..122b3096
--- /dev/null
+++ b/packages/docs/Next/Forms/InputFile/InputFileLabel.vue
@@ -0,0 +1,16 @@
+<template>
+    <FoInputFile label="Pick a file"
+                 @upload:file="file = $event"
+    />
+
+    <FoInputFile :label="{ text: 'Upload', type: 'floating' }"
+                 @upload:file="file = $event"
+    />
+</template>
+
+<script setup lang="ts">
+import { FoInputFile } from 'flyonui-vue';
+import { ref }         from 'vue';
+
+const file = ref<File | null>(null);
+</script>
diff --git a/packages/docs/Next/Forms/InputFile/InputFileSize.vue b/packages/docs/Next/Forms/InputFile/InputFileSize.vue
new file mode 100644
index 00000000..bf0ca9f4
--- /dev/null
+++ b/packages/docs/Next/Forms/InputFile/InputFileSize.vue
@@ -0,0 +1,26 @@
+<template>
+    <FoInputFile size="extraSmall"
+                 @upload:file="file = $event"
+    />
+
+    <FoInputFile size="small"
+                 @upload:file="file = $event"
+    />
+
+    <FoInputFile @upload:file="file = $event" />
+
+    <FoInputFile size="large"
+                 @upload:file="file = $event"
+    />
+
+    <FoInputFile size="extraLarge"
+                 @upload:file="file = $event"
+    />
+</template>
+
+<script setup lang="ts">
+import { FoInputFile } from 'flyonui-vue';
+import { ref }         from 'vue';
+
+const file = ref<File | null>(null);
+</script>
diff --git a/packages/docs/Next/Forms/InputFile/InputFileValidationState.vue b/packages/docs/Next/Forms/InputFile/InputFileValidationState.vue
new file mode 100644
index 00000000..11b066bd
--- /dev/null
+++ b/packages/docs/Next/Forms/InputFile/InputFileValidationState.vue
@@ -0,0 +1,32 @@
+<template>
+    <FoInputFile label="Pick a file"
+                 helper-text="Helper text"
+                 is-valid
+                 @upload:file="file = $event"
+    />
+
+    <FoInputFile :label="{ text: 'Upload', type: 'floating' }"
+                 helper-text="Helper text"
+                 is-valid
+                 @upload:file="file = $event"
+    />
+
+    <FoInputFile label="Pick a file"
+                 helper-text="Helper text"
+                 :is-valid="false"
+                 @upload:file="file = $event"
+    />
+
+    <FoInputFile :label="{ text: 'Upload', type: 'floating' }"
+                 helper-text="Helper text"
+                 :is-valid="false"
+                 @upload:file="file = $event"
+    />
+</template>
+
+<script setup lang="ts">
+import { FoInputFile } from 'flyonui-vue';
+import { ref }         from 'vue';
+
+const file = ref<File | null>(null);
+</script>
diff --git a/packages/docs/Next/Forms/InputFile/MultipleFilesInputFile.vue b/packages/docs/Next/Forms/InputFile/MultipleFilesInputFile.vue
new file mode 100644
index 00000000..8409ee1f
--- /dev/null
+++ b/packages/docs/Next/Forms/InputFile/MultipleFilesInputFile.vue
@@ -0,0 +1,10 @@
+<template>
+    <FoInputFiles @upload:files="files = $event" />
+</template>
+
+<script setup lang="ts">
+import { FoInputFiles } from 'flyonui-vue';
+import { ref }          from 'vue';
+
+const files = ref<FileList | null>(null);
+</script>
diff --git a/packages/docs/Next/Forms/Radio/RadioDocs.vue b/packages/docs/Next/Forms/Radio/RadioDocs.vue
index 93c6f0a8..60942ae0 100644
--- a/packages/docs/Next/Forms/Radio/RadioDocs.vue
+++ b/packages/docs/Next/Forms/Radio/RadioDocs.vue
@@ -1,7 +1,7 @@
 <template>
     <ComponentDocs :previews="previews"
                    :section="section"
-                   api-docs-component-names="FoRadio"
+                   :api-docs-component-names="['FoRadio', 'FoImageRadio']"
     />
 </template>
 
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-default-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-default-chromium-linux.png
new file mode 100644
index 00000000..3220f411
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-default-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-disabled-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-disabled-chromium-linux.png
new file mode 100644
index 00000000..56c82ed1
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-disabled-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-helper-text-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-helper-text-chromium-linux.png
new file mode 100644
index 00000000..5035a407
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-helper-text-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-label-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-label-chromium-linux.png
new file mode 100644
index 00000000..b38ccdbc
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-label-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-multiple-files-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-multiple-files-chromium-linux.png
new file mode 100644
index 00000000..e0add2d1
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-multiple-files-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-size-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-size-chromium-linux.png
new file mode 100644
index 00000000..b50f8824
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-size-chromium-linux.png differ
diff --git a/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-validation-state-chromium-linux.png b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-validation-state-chromium-linux.png
new file mode 100644
index 00000000..3fa0f286
Binary files /dev/null and b/packages/docs/tests/EndToEnd/Docs.browser.spec.ts-snapshots/forms-input-file-validation-state-chromium-linux.png differ