1 files changed, 63 insertions, 0 deletions
diff --git a/src/components/molecules/forms/labelled-field/labelled-field.tsx b/src/components/molecules/forms/labelled-field/labelled-field.tsx
new file mode 100644
index 0000000..af492b3
--- /dev/null
+++ b/src/components/molecules/forms/labelled-field/labelled-field.tsx
@@ -0,0 +1,63 @@
+import { FC, HTMLAttributes, ReactElement } from 'react';
+import {
+  CheckboxProps,
+  InputProps,
+  LabelProps,
+  RadioProps,
+  SelectProps,
+  TextAreaProps,
+} from '../../../atoms';
+import styles from './labelled-field.module.scss';
+
+export type LabelledFieldProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children'
+> & {
+  /**
+   * The field.
+   */
+  field: ReactElement<
+    CheckboxProps | InputProps | RadioProps | SelectProps | TextAreaProps
+  >;
+  /**
+   * Should the label and the field be inlined?
+   *
+   * @default false
+   */
+  isInline?: boolean;
+  /**
+   * If true, the label is displayed after the field.
+   *
+   * @default false
+   */
+  isReversedOrder?: boolean;
+  /**
+   * The field label.
+   */
+  label: ReactElement<LabelProps>;
+};
+
+/**
+ * LabelledField component
+ *
+ * Render a field tied to a label.
+ */
+export const LabelledField: FC<LabelledFieldProps> = ({
+  className = '',
+  field,
+  isInline = false,
+  isReversedOrder = false,
+  label,
+  ...props
+}) => {
+  const layoutClass = isInline ? 'wrapper--inline' : 'wrapper--stack';
+  const orderClass = isReversedOrder ? 'wrapper--reverse' : '';
+  const wrapperClass = `${styles.wrapper} ${styles[layoutClass]} ${styles[orderClass]} ${className}`;
+
+  return (
+    <div {...props} className={wrapperClass}>
+      {label}
+      {field}
+    </div>
+  );
+};