diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx
index bccae7ef8..eb70f6534 100644
--- a/src/components/FileInputField/FileInputField.jsx
+++ b/src/components/FileInputField/FileInputField.jsx
@@ -1,10 +1,19 @@
 import PropTypes from 'prop-types';
-import React, { useContext } from 'react';
+import React, {
+  useContext,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
 import { withGlobalProps } from '../../providers/globalProps';
-import { classNames } from '../../helpers/classNames/classNames';
+import { classNames } from '../../helpers/classNames';
 import { transferProps } from '../../helpers/transferProps';
+import { TranslationsContext } from '../../providers/translations';
+import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
+import { InputGroupContext } from '../InputGroup';
+import { Text } from '../Text';
 import { FormLayoutContext } from '../FormLayout';
 import styles from './FileInputField.module.scss';
 
@@ -17,54 +26,156 @@ export const FileInputField = React.forwardRef((props, ref) => {
     isLabelVisible,
     label,
     layout,
+    multiple,
+    onFilesChanged,
     required,
+    size,
     validationState,
     validationText,
     ...restProps
   } = props;
 
-  const context = useContext(FormLayoutContext);
+  const internalInputRef = useRef();
+
+  // We need to have a reference to the input element to be able to call its methods,
+  // but at the same time we want to expose this reference to the parent component for
+  // case someone wants to call input methods from outside the component.
+  useImperativeHandle(ref, () => internalInputRef.current);
+
+  const formLayoutContext = useContext(FormLayoutContext);
+  const inputGroupContext = useContext(InputGroupContext);
+  const translations = useContext(TranslationsContext);
+
+  const [selectedFileNames, setSelectedFileNames] = useState([]);
+  const [isDragging, setIsDragging] = useState(false);
+
+  const handleFileChange = (files, event) => {
+    if (files.length === 0) {
+      setSelectedFileNames([]);
+      return;
+    }
+
+    // Mimic the native behavior of the `input` element: if multiple files are selected and the input
+    // does not accept multiple files, no files are processed.
+    if (files.length > 1 && !multiple) {
+      setSelectedFileNames([]);
+      return;
+    }
+
+    const fileNames = [];
+
+    [...files].forEach((file) => {
+      fileNames.push(file.name);
+    });
+
+    setSelectedFileNames(fileNames);
+    onFilesChanged(files, event);
+  };
+
+  const handleInputChange = (event) => {
+    handleFileChange(event.target.files, event);
+  };
+
+  const handleClick = () => {
+    internalInputRef?.current.click();
+  };
+
+  const handleDrop = (event) => {
+    event.preventDefault();
+    handleFileChange(event.dataTransfer.files, event);
+    setIsDragging(false);
+  };
+
+  const handleDragOver = (event) => {
+    if (!isDragging) {
+      setIsDragging(true);
+    }
+    event.preventDefault();
+  };
+
+  const handleDragLeave = () => {
+    if (isDragging) {
+      setIsDragging(false);
+    }
+  };
 
   return (
-    <label
+    <div
       className={classNames(
         styles.root,
         fullWidth && styles.isRootFullWidth,
-        context && styles.isRootInFormLayout,
-        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
+        formLayoutContext && styles.isRootInFormLayout,
+        resolveContextOrProp(formLayoutContext && formLayoutContext.layout, layout) === 'horizontal'
           ? styles.isRootLayoutHorizontal
           : styles.isRootLayoutVertical,
-        disabled && styles.isRootDisabled,
+        resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled) && styles.isRootDisabled,
+        inputGroupContext && styles.isRootGrouped,
+        isDragging && styles.isRootDragging,
         required && styles.isRootRequired,
+        getRootSizeClassName(
+          resolveContextOrProp(inputGroupContext && inputGroupContext.size, size),
+          styles,
+        ),
         getRootValidationStateClassName(validationState, styles),
       )}
-      htmlFor={id}
-      id={id && `${id}__label`}
+      id={`${id}__root`}
+      onDragLeave={!disabled ? handleDragLeave : undefined}
+      onDragOver={!disabled ? handleDragOver : undefined}
+      onDrop={!disabled ? handleDrop : undefined}
     >
-      <div
+      <label
         className={classNames(
           styles.label,
-          !isLabelVisible && styles.isLabelHidden,
+          (!isLabelVisible || inputGroupContext) && styles.isLabelHidden,
         )}
-        id={id && `${id}__labelText`}
+        htmlFor={id}
+        id={`${id}__labelText`}
       >
         {label}
-      </div>
+      </label>
       <div className={styles.field}>
         <div className={styles.inputContainer}>
           <input
             {...transferProps(restProps)}
-            disabled={disabled}
+            className={styles.input}
+            disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
             id={id}
-            ref={ref}
+            multiple={multiple}
+            onChange={handleInputChange}
+            ref={internalInputRef}
             required={required}
+            tabIndex={-1}
             type="file"
           />
+          <button
+            className={styles.dropZone}
+            disabled={resolveContextOrProp(inputGroupContext && inputGroupContext.disabled, disabled)}
+            onClick={handleClick}
+            type="button"
+          >
+            <Text lines={1}>
+              {!selectedFileNames.length && (
+                <>
+                  <span className={styles.dropZoneLink}>{translations.FileInputField.browse}</span>
+                  {' '}
+                  {translations.FileInputField.drop}
+                </>
+              )}
+              {selectedFileNames.length === 1 && selectedFileNames[0]}
+              {selectedFileNames.length > 1 && (
+                <>
+                  {selectedFileNames.length}
+                  {' '}
+                  {translations.FileInputField.filesSelected}
+                </>
+              )}
+            </Text>
+          </button>
         </div>
         {helpText && (
           <div
             className={styles.helpText}
-            id={id && `${id}__helpText`}
+            id={`${id}__helpText`}
           >
             {helpText}
           </div>
@@ -72,13 +183,13 @@ export const FileInputField = React.forwardRef((props, ref) => {
         {validationText && (
           <div
             className={styles.validationText}
-            id={id && `${id}__validationText`}
+            id={`${id}__validationText`}
           >
             {validationText}
           </div>
         )}
       </div>
-    </label>
+    </div>
   );
 });
 
@@ -86,10 +197,11 @@ FileInputField.defaultProps = {
   disabled: false,
   fullWidth: false,
   helpText: null,
-  id: undefined,
   isLabelVisible: true,
   layout: 'vertical',
+  multiple: false,
   required: false,
+  size: 'medium',
   validationState: null,
   validationText: null,
 };
@@ -116,7 +228,7 @@ FileInputField.propTypes = {
    * * `<ID>__helpText`
    * * `<ID>__validationText`
    */
-  id: PropTypes.string,
+  id: PropTypes.string.isRequired,
   /**
    * If `false`, the label will be visually hidden (but remains accessible by assistive
    * technologies).
@@ -134,10 +246,24 @@ FileInputField.propTypes = {
    *
    */
   layout: PropTypes.oneOf(['horizontal', 'vertical']),
+  /**
+   * If `true`, the input will accept multiple files.
+   */
+  multiple: PropTypes.bool,
+  /**
+   * Callback fired when the value of the input changes.
+   */
+  onFilesChanged: PropTypes.func.isRequired,
   /**
    * If `true`, the input will be required.
    */
   required: PropTypes.bool,
+  /**
+   * Size of the field.
+   *
+   * Ignored if the component is rendered within `InputGroup` component as the value is inherited in such case.
+   */
+  size: PropTypes.oneOf(['small', 'medium', 'large']),
   /**
    * Alter the field to provide feedback based on validation result.
    */
diff --git a/src/components/FileInputField/FileInputField.module.scss b/src/components/FileInputField/FileInputField.module.scss
index fe1da7768..e71e75a9d 100644
--- a/src/components/FileInputField/FileInputField.module.scss
+++ b/src/components/FileInputField/FileInputField.module.scss
@@ -1,8 +1,16 @@
+// 1. The drop zone is constructed as a button to support keyboard operation.
+// 2. Prevent pointer events on all children of the root element to not to trigger drag events on children.
+
 @use "../../styles/tools/form-fields/box-field-elements";
 @use "../../styles/tools/form-fields/box-field-layout";
+@use "../../styles/tools/form-fields/box-field-sizes";
 @use "../../styles/tools/form-fields/foundation";
 @use "../../styles/tools/form-fields/variants";
 @use "../../styles/tools/accessibility";
+@use "../../styles/tools/links";
+@use "../../styles/tools/transition";
+@use "../../styles/tools/reset";
+@use "settings";
 
 @layer components.file-input-field {
     // Foundation
@@ -18,6 +26,54 @@
         @include box-field-elements.input-container();
     }
 
+    .input {
+        @include accessibility.hide-text();
+    }
+
+    .dropZone {
+        --rui-local-color: #{settings.$drop-zone-color};
+        --rui-local-border-color: #{settings.$drop-zone-border-color};
+        --rui-local-background: #{settings.$drop-zone-background-color};
+
+        @include reset.button(); // 1.
+        @include box-field-elements.base();
+
+        display: flex;
+        align-items: center;
+        justify-content: start;
+        font-weight: settings.$drop-zone-font-weight;
+        font-size: var(--rui-local-font-size);
+        line-height: settings.$drop-zone-line-height;
+        font-family: settings.$drop-zone-font-family;
+        border-style: dashed;
+    }
+
+    .isRootDragging .dropZone {
+        --rui-local-border-color: #{settings.$drop-zone-dragging-border-color};
+    }
+
+    .isRootDisabled .dropZone {
+        cursor: settings.$drop-zone-disabled-cursor;
+    }
+
+    .root:not(.isRootDisabled, .isRootDragging) .dropZone:hover {
+        --rui-local-border-color: #{settings.$drop-zone-hover-border-color};
+    }
+
+    .root:not(.isRootDisabled, .isRootDragging) .dropZone:active {
+        --rui-local-border-color: #{settings.$drop-zone-active-border-color};
+    }
+
+    .dropZoneLink {
+        @include links.base();
+
+        &::before {
+            content: "";
+            position: absolute;
+            inset: 0;
+        }
+    }
+
     .helpText,
     .validationText {
         @include foundation.help-text();
@@ -28,6 +84,18 @@
     }
 
     // States
+    .isRootDisabled {
+        --rui-local-color: #{settings.$drop-zone-disabled-color};
+        --rui-local-border-color: #{settings.$drop-zone-disabled-border-color};
+        --rui-local-background: #{settings.$drop-zone-disabled-background-color};
+
+        @include variants.disabled-state();
+    }
+
+    .isRootDisabled .dropZoneLink {
+        cursor: inherit;
+    }
+
     .isRootStateInvalid {
         @include variants.validation(invalid);
     }
@@ -56,10 +124,28 @@
     }
 
     .isRootFullWidth {
-        @include box-field-layout.full-width();
+        @include box-field-layout.full-width($input-element-selector: ".dropZone");
     }
 
     .isRootInFormLayout {
         @include box-field-layout.in-form-layout();
     }
+
+    // Sizes
+    .isRootSizeSmall {
+        @include box-field-sizes.size(small);
+    }
+
+    .isRootSizeMedium {
+        @include box-field-sizes.size(medium);
+    }
+
+    .isRootSizeLarge {
+        @include box-field-sizes.size(large);
+    }
+
+    // Groups
+    .isRootGrouped {
+        @include box-field-elements.in-group-layout($input-element-selector: ".dropZone");
+    }
 }
diff --git a/src/components/FileInputField/README.md b/src/components/FileInputField/README.md
index 87bc22574..8f80aef26 100644
--- a/src/components/FileInputField/README.md
+++ b/src/components/FileInputField/README.md
@@ -13,7 +13,7 @@ import { FileInputField } from '@react-ui-org/react-ui';
 And use it:
 
 ```docoff-react-preview
-<FileInputField label="Attachment" />
+<FileInputField id="my-file" label="Attachment" onFilesChanged={() => {}} />
 ```
 
 See [API](#api) for all available options.
@@ -48,12 +48,37 @@ layout perspective, FileInputFields work just like any other form fields.
 
 ## Sizes
 
+Aside from the default (medium) size, two additional sizes are available: small
+and large.
+
+```docoff-react-preview
+<FileInputField
+  id="my-file-small"
+  label="Attachment"
+  onFilesChanged={() => {}}
+  size="small"
+/>
+<FileInputField
+  id="my-file-medium"
+  label="Attachment"
+  onFilesChanged={() => {}}
+/>
+<FileInputField
+  id="my-file-large"
+  label="Attachment"
+  onFilesChanged={() => {}}
+  size="large"
+/>
+```
+
 Full-width fields span the full width of a parent:
 
 ```docoff-react-preview
 <FileInputField
   fullWidth
+  id="my-file"
   label="First name"
+  onFilesChanged={() => {}}
 />
 ```
 
@@ -68,8 +93,10 @@ dangerous to hide labels from users in most cases. Keep in mind you should
 
 ```docoff-react-preview
 <FileInputField
+  id="my-file"
   isLabelVisible={false}
   label="Attachment"
+  onFilesChanged={() => {}}
 />
 ```
 
@@ -81,14 +108,18 @@ supports this kind of layout as well.
 
 ```docoff-react-preview
 <FileInputField
+  id="my-file-horizontal"
   label="Attachment"
   layout="horizontal"
+  onFilesChanged={() => {}}
 />
 <FileInputField
   fullWidth
+  id="my-file-horizontal-full-width"
   isLabelVisible={false}
   label="Attachment"
   layout="horizontal"
+  onFilesChanged={() => {}}
 />
 ```
 
@@ -100,18 +131,24 @@ filled.
 ```docoff-react-preview
 <FileInputField
   helpText="Choose one or more files to upload."
+  id="my-file-help-text"
   label="Attachment"
+  onFilesChanged={() => {}}
 />
 <FileInputField
   helpText="Choose one or more files to upload."
+  id="my-file-help-text-horizontal"
   label="Attachment"
   layout="horizontal"
+  onFilesChanged={() => {}}
 />
 <FileInputField
   fullWidth
   helpText="Choose one or more files to upload."
+  id="my-file-help-text-horizontal-full-width"
   label="Attachment"
   layout="horizontal"
+  onFilesChanged={() => {}}
 />
 ```
 
@@ -126,17 +163,23 @@ have.
 
 ```docoff-react-preview
 <FileInputField
+  id="my-file-valid"
   label="Attachment"
+  onFilesChanged={() => {}}
   validationState="valid"
   validationText="Looks good!"
 />
 <FileInputField
+  id="my-file-invalid"
   label="Attachment"
+  onFilesChanged={() => {}}
   validationState="invalid"
   validationText="Your file is too big. Please select something smaller."
 />
 <FileInputField
+  id="my-file-warning"
   label="Attachment"
+  onFilesChanged={() => {}}
   validationState="warning"
   validationText={`
     You selected more than 10 files.
@@ -152,7 +195,44 @@ It's possible to disable the whole input.
 ```docoff-react-preview
 <FileInputField
   disabled
+  id="my-file"
   label="Attachment"
+  onFilesChanged={() => {}}
+/>
+```
+
+## Handling Files
+
+Files selected by the user are handled by providing a custom function to the
+`onFilesChanged` prop. The `onFilesChanged` function is then called on the
+`change` event of the `input` element and on the `drop` event of the root
+`div` element.
+
+```docoff-react-preview
+<FileInputField
+  id="my-file"
+  label="Attachment"
+  onFilesChanged={(files, event) => {
+    // Do something with the files…
+    console.log('Files selected:', files);
+  }}
+/>
+```
+
+### Multiple Files
+
+By default, users can select only one file. To allow selecting multiple files,
+set the `multiple` prop to `true`.
+
+```docoff-react-preview
+<FileInputField
+  id="my-files"
+  label="Attachment"
+  multiple
+  onFilesChanged={(files, event) => {
+    // Do something with the files…
+    console.log('Files selected:', files);
+  }}
 />
 ```
 
@@ -172,8 +252,9 @@ to improve its accessibility.
     Choose up to 10 files. Allowed extensions are .pdf, .jpg, .jpeg, or .png.
     Size limit is 10 MB.
   `}
+  id="my-file"
   label="Attachment"
-  multiple
+  onFilesChanged={() => {}}
 />
 ```
 
diff --git a/src/components/FileInputField/__tests__/FileInputField.test.jsx b/src/components/FileInputField/__tests__/FileInputField.test.jsx
index 66f579520..77881c584 100644
--- a/src/components/FileInputField/__tests__/FileInputField.test.jsx
+++ b/src/components/FileInputField/__tests__/FileInputField.test.jsx
@@ -13,13 +13,16 @@ import { formLayoutProviderTest } from '../../../../tests/providerTests/formLayo
 import { isLabelVisibleTest } from '../../../../tests/propTests/isLabelVisibleTest';
 import { labelPropTest } from '../../../../tests/propTests/labelPropTest';
 import { layoutPropTest } from '../../../../tests/propTests/layoutPropTest';
+import { sizePropTest } from '../../../../tests/propTests/sizePropTest';
 import { requiredPropTest } from '../../../../tests/propTests/requiredPropTest';
 import { validationStatePropTest } from '../../../../tests/propTests/validationStatePropTest';
 import { validationTextPropTest } from '../../../../tests/propTests/validationTextPropTest';
 import { FileInputField } from '../FileInputField';
 
 const mandatoryProps = {
+  id: 'id',
   label: 'label',
+  onFilesChanged: () => {},
 };
 
 describe('rendering', () => {
@@ -33,7 +36,6 @@ describe('rendering', () => {
     [
       {
         helpText: 'help text',
-        id: 'id',
         validationText: 'validation text',
       },
       (rootElement) => {
@@ -41,13 +43,14 @@ describe('rendering', () => {
         expect(within(rootElement).getByText('label')).toHaveAttribute('id', 'id__labelText');
         expect(within(rootElement).getByText('help text')).toHaveAttribute('id', 'id__helpText');
         expect(within(rootElement).getByText('validation text')).toHaveAttribute('id', 'id__validationText');
-        expect(rootElement).toHaveAttribute('id', 'id__label');
+        expect(rootElement).toHaveAttribute('id', 'id__root');
       },
     ],
     ...isLabelVisibleTest(),
     ...labelPropTest(),
     ...layoutPropTest,
     ...requiredPropTest,
+    ...sizePropTest,
     ...validationStatePropTest,
     ...validationTextPropTest,
   ])('renders with props: "%s"', (testedProps, assert) => {
@@ -68,12 +71,13 @@ describe('functionality', () => {
     render((
       <FileInputField
         {...mandatoryProps}
-        onChange={spy}
+        id="id"
+        onFilesChanged={spy}
       />
     ));
 
     const file = new File(['hello'], 'hello.png', { type: 'image/png' });
-    await userEvent.upload(screen.getByLabelText('label'), file);
+    await userEvent.upload(screen.getByTestId('id'), file);
     expect(spy).toHaveBeenCalled();
   });
 });
diff --git a/src/components/FileInputField/_settings.scss b/src/components/FileInputField/_settings.scss
new file mode 100644
index 000000000..1b882d49f
--- /dev/null
+++ b/src/components/FileInputField/_settings.scss
@@ -0,0 +1,15 @@
+@use "../../styles/theme/typography";
+
+$drop-zone-color: var(--rui-color-text-primary);
+$drop-zone-disabled-color: var(--rui-color-text-primary-disabled);
+$drop-zone-border-color: var(--rui-color-border-primary);
+$drop-zone-hover-border-color: var(--rui-color-border-primary-hover);
+$drop-zone-active-border-color: var(--rui-color-border-primary-active);
+$drop-zone-dragging-border-color: var(--rui-color-border-primary-active);
+$drop-zone-disabled-border-color: var(--rui-color-border-primary);
+$drop-zone-background-color: var(--rui-color-background-basic);
+$drop-zone-disabled-background-color: var(--rui-color-background-disabled);
+$drop-zone-disabled-cursor: var(--rui-cursor-not-allowed);
+$drop-zone-font-weight: typography.$font-weight-base;
+$drop-zone-line-height: typography.$line-height-base;
+$drop-zone-font-family: typography.$font-family-base;
diff --git a/src/components/FormLayout/README.md b/src/components/FormLayout/README.md
index 8c9f713d0..7bacef204 100644
--- a/src/components/FormLayout/README.md
+++ b/src/components/FormLayout/README.md
@@ -389,6 +389,7 @@ React.createElement(() => {
         />
         <FileInputField
           label="Attachment"
+          onFilesChanged={() => {}}
         />
         <Toggle
           checked={receiveNewsletter}
diff --git a/src/components/InputGroup/InputGroup.module.scss b/src/components/InputGroup/InputGroup.module.scss
index 16ac95ebe..0751322d9 100644
--- a/src/components/InputGroup/InputGroup.module.scss
+++ b/src/components/InputGroup/InputGroup.module.scss
@@ -84,14 +84,14 @@
 
     // Sizes
     .isRootSizeSmall {
-        @include box-field-sizes.size(small, $has-input: false);
+        @include box-field-sizes.size(small);
     }
 
     .isRootSizeMedium {
-        @include box-field-sizes.size(medium, $has-input: false);
+        @include box-field-sizes.size(medium);
     }
 
     .isRootSizeLarge {
-        @include box-field-sizes.size(large, $has-input: false);
+        @include box-field-sizes.size(large);
     }
 }
diff --git a/src/components/InputGroup/README.md b/src/components/InputGroup/README.md
index dd16362d2..2bbd8e1f3 100644
--- a/src/components/InputGroup/README.md
+++ b/src/components/InputGroup/README.md
@@ -145,7 +145,7 @@ supports this kind of layout as well.
   label="Horizontal layout"
   layout="horizontal"
 >
-  <TextField label="Label" />
+  <FileInputField label="Attachment" onFilesChanged={() => {}} />
   <Button label="Submit" />
 </InputGroup>
 ```
diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
index 77fb431b2..cab4e6d5f 100644
--- a/src/components/Modal/README.md
+++ b/src/components/Modal/README.md
@@ -946,7 +946,7 @@ React.createElement(() => {
                       { label: 'Project manager', value: 'project-manager' },
                     ]}
                   />
-                  <FileInputField label="Photo" />
+                  <FileInputField label="Photo" onFilesChanged={() => {}} />
                   <TextArea
                     label="Additional info"
                     helpText={<p>Enter key is used for new line,<br />so <strong>Enter won't submit the form</strong>.</p>}
diff --git a/src/styles/elements/_links.scss b/src/styles/elements/_links.scss
index 724a92315..573e3fccc 100644
--- a/src/styles/elements/_links.scss
+++ b/src/styles/elements/_links.scss
@@ -1,17 +1,5 @@
-@use "../theme/links";
+@use "../tools/links";
 
 a {
-    text-decoration: links.$decoration;
-    text-underline-offset: links.$underline-offset;
-    color: links.$color;
-
-    &:hover {
-        text-decoration: links.$hover-decoration;
-        color: links.$hover-color;
-    }
-
-    &:active {
-        text-decoration: links.$active-decoration;
-        color: links.$active-color;
-    }
+    @include links.base();
 }
diff --git a/src/styles/generic/_focus.scss b/src/styles/generic/_focus.scss
index ce8f0f37f..6d8f537a1 100644
--- a/src/styles/generic/_focus.scss
+++ b/src/styles/generic/_focus.scss
@@ -6,6 +6,6 @@
     outline: none;
 }
 
-:is(a, button, input, select, textarea, [type="button"], [type="submit"]) {
+:is(a, button, input, select, textarea, [type="button"], [type="submit"]):focus-visible {
     @include accessibility.focus-ring();
 }
diff --git a/src/styles/theme/_form-fields.scss b/src/styles/theme/_form-fields.scss
index f7cd2b5b2..bf3f71d98 100644
--- a/src/styles/theme/_form-fields.scss
+++ b/src/styles/theme/_form-fields.scss
@@ -33,15 +33,15 @@ $horizontal-full-width-label-width: var(--rui-FormField--horizontal--full-width_
 // Form fields: links in validation states
 $link-validation-colors: (
     invalid: (
+        default: var(--rui-color-feedback-danger),
+        hover: var(--rui-color-feedback-danger-hover),
+        active: var(--rui-color-feedback-danger-active),
+    ),
+    valid: (
         default: var(--rui-color-feedback-success),
         hover: var(--rui-color-feedback-success-hover),
         active: var(--rui-color-feedback-success-active),
     ),
-    valid: (
-        default: var(--rui-color-feedback-valid),
-        hover: var(--rui-color-feedback-valid-hover),
-        active: var(--rui-color-feedback-valid-active),
-    ),
     warning: (
         default: var(--rui-color-feedback-warning),
         hover: var(--rui-color-feedback-warning-hover),
diff --git a/src/styles/tools/_accessibility.scss b/src/styles/tools/_accessibility.scss
index 1b27a3985..8da3c190e 100644
--- a/src/styles/tools/_accessibility.scss
+++ b/src/styles/tools/_accessibility.scss
@@ -45,9 +45,7 @@
 }
 
 @mixin focus-ring() {
-    &:focus-visible {
-        outline: theme.$focus-outline;
-        outline-offset: theme.$focus-outline-offset;
-        box-shadow: theme.$focus-box-shadow;
-    }
+    outline: theme.$focus-outline;
+    outline-offset: theme.$focus-outline-offset;
+    box-shadow: theme.$focus-box-shadow;
 }
diff --git a/src/styles/tools/_links.scss b/src/styles/tools/_links.scss
new file mode 100644
index 000000000..19d8a4961
--- /dev/null
+++ b/src/styles/tools/_links.scss
@@ -0,0 +1,17 @@
+@use "../theme/links";
+
+@mixin base() {
+    text-decoration: links.$decoration;
+    text-underline-offset: links.$underline-offset;
+    color: links.$color;
+
+    &:hover {
+        text-decoration: links.$hover-decoration;
+        color: links.$hover-color;
+    }
+
+    &:active {
+        text-decoration: links.$active-decoration;
+        color: links.$active-color;
+    }
+}
diff --git a/src/styles/tools/form-fields/_box-field-elements.scss b/src/styles/tools/form-fields/_box-field-elements.scss
index 5bf4256c0..65051f0ba 100644
--- a/src/styles/tools/form-fields/_box-field-elements.scss
+++ b/src/styles/tools/form-fields/_box-field-elements.scss
@@ -4,6 +4,7 @@
 // 3. Let inputs properly fit various layout scenarios.
 // 4. Leave out space for SelectField caret.
 // 5. Use a block-level display mode to prevent extra white space below grouped inputs in Safari.
+// 6. Pull out the focused input from the group.
 
 @use "../../settings/form-fields" as settings;
 @use "../../theme/form-fields" as theme;
@@ -18,24 +19,29 @@
     max-width: 100%; // 3.
 }
 
-@mixin input() {
+@mixin base() {
     @include transition.add((opacity, color, border-color, background-color, box-shadow));
 
-    appearance: none;
     width: theme.$box-input-width;
     min-width: theme.$box-input-min-width;
     max-width: 100%; // 3.
     height: var(--rui-local-height);
     padding: var(--rui-local-padding-y) var(--rui-local-padding-x);
+    color: var(--rui-local-color);
+    border: theme.$box-border-width solid var(--rui-local-border-color);
+    border-radius: theme.$box-border-radius;
+    background: var(--rui-local-background);
+}
+
+@mixin input() {
+    @include base();
+
+    appearance: none;
     font-weight: settings.$box-input-font-weight;
     font-size: var(--rui-local-font-size);
     line-height: settings.$box-input-line-height;
     font-family: settings.$box-input-font-family;
     vertical-align: middle;
-    color: var(--rui-local-color);
-    border: theme.$box-border-width solid var(--rui-local-border-color);
-    border-radius: theme.$box-border-radius;
-    background: var(--rui-local-background);
     box-shadow: var(--rui-local-box-shadow);
 
     &::placeholder {
@@ -124,17 +130,23 @@
     }
 }
 
-@mixin in-group-layout() {
+@mixin in-group-layout($input-element-selector: ".input") {
+    // 6.
+    &:focus-within {
+        isolation: isolate;
+        z-index: 1;
+    }
+
     .inputContainer {
         display: block; // 5.
     }
 
-    &:not(:first-child) .input {
+    &:not(:first-child) #{$input-element-selector} {
         border-start-start-radius: var(--rui-local-inner-border-radius);
         border-end-start-radius: var(--rui-local-inner-border-radius);
     }
 
-    &:not(:last-child) .input {
+    &:not(:last-child) #{$input-element-selector} {
         border-start-end-radius: var(--rui-local-inner-border-radius);
         border-end-end-radius: var(--rui-local-inner-border-radius);
     }
diff --git a/src/styles/tools/form-fields/_box-field-layout.scss b/src/styles/tools/form-fields/_box-field-layout.scss
index e76386730..1ab157f1d 100644
--- a/src/styles/tools/form-fields/_box-field-layout.scss
+++ b/src/styles/tools/form-fields/_box-field-layout.scss
@@ -166,14 +166,14 @@
     }
 }
 
-@mixin full-width() {
+@mixin full-width($input-element-selector: ".input") {
     display: flex;
     flex-direction: column;
     width: 100%;
 
     .field,
     .inputContainer,
-    .input {
+    #{$input-element-selector} {
         width: 100%;
     }
 
diff --git a/src/styles/tools/form-fields/_box-field-sizes.scss b/src/styles/tools/form-fields/_box-field-sizes.scss
index 4049d9ff3..d12bb0d79 100644
--- a/src/styles/tools/form-fields/_box-field-sizes.scss
+++ b/src/styles/tools/form-fields/_box-field-sizes.scss
@@ -1,22 +1,18 @@
 @use "sass:map";
 @use "../../theme/form-fields" as theme;
 
-@mixin size($size, $has-input: true, $is-multiline: false) {
+@mixin size($size, $is-multiline: false) {
     $size-properties: map.get(theme.$box-sizes, $size);
 
+    --rui-local-height: #{map.get($size-properties, height)};
     --rui-local-padding-y: #{map.get($size-properties, padding-y)};
     --rui-local-padding-x: #{map.get($size-properties, padding-x)};
+    --rui-local-font-size: #{map.get($size-properties, font-size)};
 
-    @if $has-input {
-        --rui-local-font-size: #{map.get($size-properties, font-size)};
-
+    @if $is-multiline {
         .input {
-            @if $is-multiline {
-                height: auto;
-                min-height: map.get($size-properties, height);
-            } @else {
-                --rui-local-height: #{map.get($size-properties, height)};
-            }
+            height: auto;
+            min-height: map.get($size-properties, height);
         }
     }
 }
diff --git a/src/styles/tools/form-fields/_variants.scss b/src/styles/tools/form-fields/_variants.scss
index d132eecb4..7b03eba48 100644
--- a/src/styles/tools/form-fields/_variants.scss
+++ b/src/styles/tools/form-fields/_variants.scss
@@ -13,11 +13,6 @@
 @use "../../settings/form-fields" as settings;
 @use "../../theme/form-fields" as theme;
 
-@mixin _disabled-state() {
-    opacity: theme.$disabled-opacity;
-    cursor: theme.$disabled-cursor;
-}
-
 // 1.
 @mixin _generate-custom-properties($type, $variant, $state) {
     @if not list.index(map.keys(map.get(settings.$themeable-variant-states, $type)), $variant) {
@@ -113,11 +108,16 @@
     }
 }
 
+@mixin disabled-state() {
+    opacity: theme.$disabled-opacity;
+    cursor: theme.$disabled-cursor;
+}
+
 @mixin visual($type, $variant: "default", $has-caret: false) {
     @include _get-theme($type, $variant);
 
     .input:disabled {
-        @include _disabled-state();
+        @include disabled-state();
     }
 
     @if $type == "box" and $variant == "filled" {
@@ -137,15 +137,15 @@
         }
 
         &.isRootDisabled .caret {
-            @include _disabled-state();
+            @include disabled-state();
         }
     }
 }
 
 @mixin validation($variant) {
-    --rui-local-link-color: map.get(theme.$link-validation-colors, $variant, default);
-    --rui-local-link-color-hover: map.get(theme.$link-validation-colors, $variant, hover);
-    --rui-local-link-color-active: map.get(theme.$link-validation-colors, $variant, active);
+    --rui-local-link-color: #{map.get(theme.$link-validation-colors, $variant, default)};
+    --rui-local-link-color-hover: #{map.get(theme.$link-validation-colors, $variant, hover)};
+    --rui-local-link-color-active: #{map.get(theme.$link-validation-colors, $variant, active)};
 
     @include _get-theme(validation, $variant);
 }
diff --git a/src/translations/en.js b/src/translations/en.js
index a51e7aeea..2fd451c57 100644
--- a/src/translations/en.js
+++ b/src/translations/en.js
@@ -2,6 +2,11 @@ export default {
   Alert: {
     close: 'Close',
   },
+  FileInputField: {
+    browse: 'Browse',
+    drop: 'or drop file here',
+    filesSelected: 'files selected',
+  },
   ModalCloseButton: {
     close: 'Close',
   },
diff --git a/webpack.config.babel.js b/webpack.config.babel.js
index 2cf9123ae..9e7312eca 100644
--- a/webpack.config.babel.js
+++ b/webpack.config.babel.js
@@ -5,7 +5,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const VisualizerPlugin = require('webpack-visualizer-plugin2');
 
 const MAX_DEVELOPMENT_OUTPUT_SIZE = 3400000;
-const MAX_PRODUCTION_OUTPUT_SIZE = 440000;
+const MAX_PRODUCTION_OUTPUT_SIZE = 450000;
 
 module.exports = (env, argv) => ({
   devtool: argv.mode === 'production'