@conduction/components 2.1.21 → 2.1.23

package/README.md

@@ -4,6 +4,8 @@
 
 - **Version 2.1 (breaking changes from 2.0.x)**
 
+  - 2.1.23: Added optional error messages to CreateKeyValue and unused classname removed warning.
+  - 2.1.22: Added optional error messages to textarea, select and input fields.
   - 2.1.21: Added optional copy button and refactored delete button in CreateKeyValue.
   - 2.1.20: Updated react.fc code and github actions added.
   - 2.1.19: Refactor Tooltip layout.

package/lib/components/formFields/createKeyValue/CreateKeyValue.d.ts

@@ -13,10 +13,11 @@ interface CreateKeyValueProps {
         canCopy: boolean;
         onCopied?: () => any;
     };
+    hideErrorMessage?: boolean;
 }
 export interface IKeyValue {
     key: string;
     value: string;
 }
-export declare const CreateKeyValue: ({ name, errors, control, validation, defaultValue, disabled, copyValue, }: CreateKeyValueProps & IReactHookFormProps) => JSX.Element;
+export declare const CreateKeyValue: ({ name, errors, control, validation, defaultValue, disabled, copyValue, hideErrorMessage, }: CreateKeyValueProps & IReactHookFormProps) => JSX.Element;
 export {};

package/lib/components/formFields/createKeyValue/CreateKeyValue.js

@@ -1,4 +1,4 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import * as styles from "./CreateKeyValue.module.css";
 import { Controller } from "react-hook-form";
@@ -8,9 +8,10 @@ import { ToolTip } from "../../toolTip/ToolTip";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
-export const CreateKeyValue = ({ name, errors, control, validation, defaultValue, disabled, copyValue, }) => {
+import { ErrorMessage } from "../errorMessage/ErrorMessage";
+export const CreateKeyValue = ({ name, errors, control, validation, defaultValue, disabled, copyValue, hideErrorMessage, }) => {
     return (_jsx(Controller, { ...{ control, name, errors }, rules: validation, render: ({ field: { onChange } }) => {
-            return _jsx(KeyValueComponent, { handleChange: onChange, ...{ defaultValue, errors, disabled, copyValue } });
+            return (_jsxs(_Fragment, { children: [_jsx(KeyValueComponent, { handleChange: onChange, ...{ defaultValue, errors, disabled, copyValue } }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };
 const KeyValueComponent = ({ defaultValue, handleChange, disabled, copyValue, }) => {
@@ -37,5 +38,5 @@ const KeyValueComponent = ({ defaultValue, handleChange, disabled, copyValue, })
     React.useEffect(() => {
         handleChange(keyValues);
     }, [keyValues]);
-    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeader, { children: "Key" }), _jsx(TableHeader, { children: "Value" }), _jsx(TableHeader, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(ToolTip, { tooltip: "Copy value", children: _jsx(Button, { ...{ disabled }, className: styles.copyButton, onClick: () => handleCopyToClipboard(keyValue.value, idx), variant: currentCopyIdx === idx ? "secondary-action" : "primary-action", children: _jsx(FontAwesomeIcon, { icon: faCopy }) }) })), _jsx(ToolTip, { tooltip: "Delete value", children: _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx("input", { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx("input", { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
+    return (_jsxs("div", { className: styles.keyValue, children: [keyValues && (_jsxs(Table, { className: styles.table, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeader, { children: "Key" }), _jsx(TableHeader, { children: "Value" }), _jsx(TableHeader, {})] }) }), _jsx(TableBody, { children: keyValues.map((keyValue, idx) => (_jsxs(TableRow, { children: [_jsx(TableCell, { children: keyValue.key }), _jsx(TableCell, { children: keyValue.value }), _jsx(TableCell, { children: _jsxs("div", { className: styles.buttonsContainer, children: [copyValue && (_jsx(ToolTip, { tooltip: "Copy value", children: _jsx(Button, { ...{ disabled }, onClick: () => handleCopyToClipboard(keyValue.value, idx), variant: currentCopyIdx === idx ? "secondary-action" : "primary-action", children: _jsx(FontAwesomeIcon, { icon: faCopy }) }) })), _jsx(ToolTip, { tooltip: "Delete value", children: _jsx(Button, { ...{ disabled }, onClick: () => setKeyValues(keyValues.filter((_keyValue) => _keyValue !== keyValue)), className: clsx(styles.deleteButton), children: _jsx(FontAwesomeIcon, { icon: faTrash }) }) })] }) })] }, `${keyValue.key}${keyValue.value}${idx}`))) })] })), _jsxs("div", { className: styles.form, children: [_jsx("input", { type: "text", placeholder: "Key", value: currentKey, ref: currentKeyRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentKey(e.target.value), ...{ disabled } }), _jsx("input", { type: "text", placeholder: "Value", value: currentValue, ref: currentValueRef, className: "denhaag-textfield__input", onChange: (e) => setCurrentValue(e.target.value), ...{ disabled } }), _jsx(Button, { onClick: handleCreate, disabled: !currentKey || !currentValue || disabled, children: "Add" })] })] }));
 };

package/lib/components/formFields/errorMessage/ErrorMessage.module.css

@@ -1,4 +1,9 @@
+:root {
+  --conduction-error-message-color: var(--skeleton-color-red-3);
+  --conduction-error-message-font-size: var(--skeleton-font-size-sm);
+}
+
 .message {
-  color: var(--gateway-ui-color-dark-red);
-  font-size: var(--gateway-ui-font-size-sm);
+  color: var(--conduction-error-message-color);
+  font-size: var(--conduction-error-message-font-size);
 }

package/lib/components/formFields/input.d.ts

@@ -6,6 +6,7 @@ export interface IInputProps {
     defaultValue?: string;
     icon?: JSX.Element;
     placeholder?: string;
+    hideErrorMessage?: boolean;
 }
 export declare const InputPassword: React.FC<IInputProps & IReactHookFormProps>;
 export declare const InputText: React.FC<IInputProps & IReactHookFormProps>;

package/lib/components/formFields/input.js

@@ -1,15 +1,16 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { TextField } from "@gemeente-denhaag/components-react";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, }) => {
+import { ErrorMessage } from "./errorMessage/ErrorMessage";
+export const InputPassword = ({ disabled, name, validation, register, placeholder, errors, hideErrorMessage, }) => {
     const [showPassword, setShowPassword] = React.useState(false);
-    return (_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(FontAwesomeIcon, { icon: faEye }) : _jsx(FontAwesomeIcon, { icon: faEyeSlash }) }) }));
+    return (_jsxs(_Fragment, { children: [_jsx(TextField, { type: showPassword ? "text" : "password", ...{ disabled, placeholder }, ...register(name, { ...validation }), invalid: errors[name], icon: _jsx("span", { onClick: () => setShowPassword(!showPassword), children: showPassword ? _jsx(FontAwesomeIcon, { icon: faEye }) : _jsx(FontAwesomeIcon, { icon: faEyeSlash }) }) }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
 };
-export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "email", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputURL = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "url", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }));
-export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }));
-export const InputFloat = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, }) => (_jsx(TextField, { type: "number", step: ".01", ...{ disabled, placeholder, icon, defaultValue }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }));
+export const InputText = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "text", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputEmail = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "email", required: !!validation?.required, ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputURL = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "url", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputNumber = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "number", ...{ defaultValue, disabled, placeholder, icon }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
+export const InputFloat = ({ disabled, name, defaultValue, validation, register, icon, placeholder, errors, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextField, { type: "number", step: ".01", ...{ disabled, placeholder, icon, defaultValue }, ...register(name, { ...validation, valueAsNumber: true }), invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
 export const InputFile = ({ disabled, name, accept, defaultValue, validation, register, }) => (_jsx("input", { className: "denhaag-textfield__input", type: "file", ...{ defaultValue, disabled, accept }, ...register(name, { ...validation }) }));

package/lib/components/formFields/select/select.d.ts

@@ -11,8 +11,9 @@ interface ISelectProps {
     defaultValue?: any;
     disabled?: boolean;
     isClearable?: boolean;
+    hideErrorMessage?: boolean;
 }
-export declare const SelectMultiple: ({ name, options, errors, control, validation, defaultValue, disabled, }: ISelectProps & IReactHookFormProps) => JSX.Element;
-export declare const SelectCreate: ({ name, options, errors, control, validation, defaultValue, disabled, }: ISelectProps & IReactHookFormProps) => JSX.Element;
-export declare const SelectSingle: ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectMultiple: ({ name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectCreate: ({ name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }: ISelectProps & IReactHookFormProps) => JSX.Element;
+export declare const SelectSingle: ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, }: ISelectProps & IReactHookFormProps) => JSX.Element;
 export {};

package/lib/components/formFields/select/select.js

@@ -1,21 +1,22 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import * as styles from "./select.module.css";
 import { Controller } from "react-hook-form";
 import ReactSelect from "react-select";
 import CreatableSelect from "react-select/creatable";
 import clsx from "clsx";
-export const SelectMultiple = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
+import { ErrorMessage } from "../errorMessage/ErrorMessage";
+export const SelectMultiple = ({ name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsx(ReactSelect, { value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : "Select one or more options..." }));
+            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : "Select one or more options..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };
-export const SelectCreate = ({ name, options, errors, control, validation, defaultValue, disabled, }) => {
+export const SelectCreate = ({ name, options, errors, control, validation, defaultValue, disabled, hideErrorMessage, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsx(CreatableSelect, { value: value ?? "", placeholder: disabled ? "Disabled..." : "Select or create one or multiple options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }));
+            return (_jsxs(_Fragment, { children: [_jsx(CreatableSelect, { value: value ?? "", placeholder: disabled ? "Disabled..." : "Select or create one or multiple options...", className: clsx(styles.select, errors[name] && styles.error), isMulti: true, isDisabled: disabled, ...{ options, onChange, errors }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) } }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };
-export const SelectSingle = ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, }) => {
+export const SelectSingle = ({ name, options, errors, control, validation, isClearable, defaultValue, disabled, hideErrorMessage, }) => {
     return (_jsx(Controller, { ...{ control, name, defaultValue }, rules: validation, render: ({ field: { onChange, value } }) => {
-            return (_jsx(ReactSelect, { value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : "Select an option..." }));
+            return (_jsxs(_Fragment, { children: [_jsx(ReactSelect, { value: value ?? "", className: clsx(styles.select, errors[name] && styles.error), isDisabled: disabled, ...{ options, onChange, errors, isClearable }, menuPortalTarget: document.body, styles: { menuPortal: (base) => ({ ...base, zIndex: 100 }) }, placeholder: disabled ? "Disabled..." : "Select an option..." }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));
         } }));
 };

package/lib/components/formFields/textarea.d.ts

@@ -4,5 +4,6 @@ export interface ITextAreaProps {
     name: string;
     disabled?: boolean;
     defaultValue?: string;
+    hideErrorMessage?: boolean;
 }
-export declare const Textarea: ({ name, validation, register, errors, disabled, defaultValue, }: ITextAreaProps & IReactHookFormProps) => JSX.Element;
+export declare const Textarea: ({ name, validation, register, errors, disabled, defaultValue, hideErrorMessage, }: ITextAreaProps & IReactHookFormProps) => JSX.Element;

package/lib/components/formFields/textarea.js

@@ -1,3 +1,4 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { TextArea } from "@gemeente-denhaag/textarea";
-export const Textarea = ({ name, validation, register, errors, disabled, defaultValue, }) => (_jsx(TextArea, { ...register(name, { ...validation }), ...{ disabled, defaultValue }, invalid: errors[name] }));
+import { ErrorMessage } from "./errorMessage/ErrorMessage";
+export const Textarea = ({ name, validation, register, errors, disabled, defaultValue, hideErrorMessage, }) => (_jsxs(_Fragment, { children: [_jsx(TextArea, { ...register(name, { ...validation }), ...{ disabled, defaultValue }, invalid: errors[name] }), errors[name] && !hideErrorMessage && _jsx(ErrorMessage, { message: errors[name].message })] }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/components",
-  "version": "2.1.21",
+  "version": "2.1.23",
   "description": "React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)",
   "main": "lib/index.js",
   "scripts": {

package/src/components/formFields/createKeyValue/CreateKeyValue.tsx

@@ -8,6 +8,7 @@ import { ToolTip } from "../../toolTip/ToolTip";
 import clsx from "clsx";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCopy, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { ErrorMessage } from "../errorMessage/ErrorMessage";
 
 /**
  * Export KeyValue input component (wrapped in FormFieldGroup)
@@ -21,6 +22,7 @@ interface CreateKeyValueProps {
     canCopy: boolean;
     onCopied?: () => any;
   };
+  hideErrorMessage?: boolean;
 }
 
 export interface IKeyValue {
@@ -36,13 +38,19 @@ export const CreateKeyValue = ({
   defaultValue,
   disabled,
   copyValue,
+  hideErrorMessage,
 }: CreateKeyValueProps & IReactHookFormProps): JSX.Element => {
   return (
     <Controller
       {...{ control, name, errors }}
       rules={validation}
       render={({ field: { onChange } }) => {
-        return <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors, disabled, copyValue }} />;
+        return (
+          <>
+            <KeyValueComponent handleChange={onChange} {...{ defaultValue, errors, disabled, copyValue }} />
+            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+          </>
+        );
       }}
     />
   );
@@ -120,7 +128,6 @@ const KeyValueComponent = ({
                       <ToolTip tooltip="Copy value">
                         <Button
                           {...{ disabled }}
-                          className={styles.copyButton}
                           onClick={() => handleCopyToClipboard(keyValue.value, idx)}
                           variant={currentCopyIdx === idx ? "secondary-action" : "primary-action"}
                         >

package/src/components/formFields/errorMessage/ErrorMessage.module.css

@@ -0,0 +1,9 @@
+:root {
+  --conduction-error-message-color: var(--skeleton-color-red-3);
+  --conduction-error-message-font-size: var(--skeleton-font-size-sm);
+}
+
+.message {
+  color: var(--conduction-error-message-color);
+  font-size: var(--conduction-error-message-font-size);
+}

package/src/components/formFields/errorMessage/ErrorMessage.tsx

@@ -0,0 +1,9 @@
+import * as styles from "./ErrorMessage.module.css";
+
+export interface IErrorMessageProps {
+  message: string;
+}
+
+export const ErrorMessage = ({ message }: IErrorMessageProps): JSX.Element => (
+  <span className={styles.message}>{message}</span>
+);

package/src/components/formFields/input.tsx

@@ -3,6 +3,7 @@ import { TextField } from "@gemeente-denhaag/components-react";
 import { IReactHookFormProps } from "./types";
 import { faEyeSlash, faEye } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { ErrorMessage } from "./errorMessage/ErrorMessage";
 
 export interface IInputProps {
   name: string;
@@ -10,6 +11,7 @@ export interface IInputProps {
   defaultValue?: string;
   icon?: JSX.Element;
   placeholder?: string;
+  hideErrorMessage?: boolean;
 }
 
 export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -19,21 +21,25 @@ export const InputPassword: React.FC<IInputProps & IReactHookFormProps> = ({
   register,
   placeholder,
   errors,
+  hideErrorMessage,
 }) => {
   const [showPassword, setShowPassword] = React.useState<boolean>(false);
 
   return (
-    <TextField
-      type={showPassword ? "text" : "password"}
-      {...{ disabled, placeholder }}
-      {...register(name, { ...validation })}
-      invalid={errors[name]}
-      icon={
-        <span onClick={() => setShowPassword(!showPassword)}>
-          {showPassword ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} />}
-        </span>
-      }
-    />
+    <>
+      <TextField
+        type={showPassword ? "text" : "password"}
+        {...{ disabled, placeholder }}
+        {...register(name, { ...validation })}
+        invalid={errors[name]}
+        icon={
+          <span onClick={() => setShowPassword(!showPassword)}>
+            {showPassword ? <FontAwesomeIcon icon={faEye} /> : <FontAwesomeIcon icon={faEyeSlash} />}
+          </span>
+        }
+      />
+      {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+    </>
   );
 };
 
@@ -46,13 +52,17 @@ export const InputText: React.FC<IInputProps & IReactHookFormProps> = ({
   icon,
   placeholder,
   errors,
+  hideErrorMessage,
 }) => (
-  <TextField
-    type="text"
-    {...{ defaultValue, disabled, placeholder, icon }}
-    {...register(name, { ...validation })}
-    invalid={errors[name]}
-  />
+  <>
+    <TextField
+      type="text"
+      {...{ defaultValue, disabled, placeholder, icon }}
+      {...register(name, { ...validation })}
+      invalid={errors[name]}
+    />
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+  </>
 );
 
 export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -64,13 +74,18 @@ export const InputEmail: React.FC<IInputProps & IReactHookFormProps> = ({
   icon,
   placeholder,
   errors,
+  hideErrorMessage,
 }) => (
-  <TextField
-    type="email"
-    {...{ defaultValue, disabled, placeholder, icon }}
-    {...register(name, { ...validation })}
-    invalid={errors[name]}
-  />
+  <>
+    <TextField
+      type="email"
+      required={!!validation?.required}
+      {...{ defaultValue, disabled, placeholder, icon }}
+      {...register(name, { ...validation })}
+      invalid={errors[name]}
+    />
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+  </>
 );
 
 export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -82,13 +97,17 @@ export const InputURL: React.FC<IInputProps & IReactHookFormProps> = ({
   icon,
   placeholder,
   errors,
+  hideErrorMessage,
 }) => (
-  <TextField
-    type="url"
-    {...{ defaultValue, disabled, placeholder, icon }}
-    {...register(name, { ...validation })}
-    invalid={errors[name]}
-  />
+  <>
+    <TextField
+      type="url"
+      {...{ defaultValue, disabled, placeholder, icon }}
+      {...register(name, { ...validation })}
+      invalid={errors[name]}
+    />
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+  </>
 );
 
 export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -100,13 +119,17 @@ export const InputNumber: React.FC<IInputProps & IReactHookFormProps> = ({
   icon,
   placeholder,
   errors,
+  hideErrorMessage,
 }) => (
-  <TextField
-    type="number"
-    {...{ defaultValue, disabled, placeholder, icon }}
-    {...register(name, { ...validation, valueAsNumber: true })}
-    invalid={errors[name]}
-  />
+  <>
+    <TextField
+      type="number"
+      {...{ defaultValue, disabled, placeholder, icon }}
+      {...register(name, { ...validation, valueAsNumber: true })}
+      invalid={errors[name]}
+    />
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+  </>
 );
 
 export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
@@ -118,14 +141,18 @@ export const InputFloat: React.FC<IInputProps & IReactHookFormProps> = ({
   icon,
   placeholder,
   errors,
+  hideErrorMessage,
 }) => (
-  <TextField
-    type="number"
-    step=".01"
-    {...{ disabled, placeholder, icon, defaultValue }}
-    {...register(name, { ...validation, valueAsNumber: true })}
-    invalid={errors[name]}
-  />
+  <>
+    <TextField
+      type="number"
+      step=".01"
+      {...{ disabled, placeholder, icon, defaultValue }}
+      {...register(name, { ...validation, valueAsNumber: true })}
+      invalid={errors[name]}
+    />
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+  </>
 );
 
 interface IInputFileProps {

package/src/components/formFields/select/select.tsx

@@ -1,109 +1,122 @@
-import * as React from "react";
-import * as styles from "./select.module.css";
-import { Control, Controller, FieldValues } from "react-hook-form";
-import ReactSelect from "react-select";
-import CreatableSelect from "react-select/creatable";
-import { IReactHookFormProps } from "../types";
-import clsx from "clsx";
-
-interface ISelectProps {
-  control: Control<FieldValues, any>;
-  options: { label: string; value: string }[];
-  name: string;
-  defaultValue?: any;
-  disabled?: boolean;
-  isClearable?: boolean;
-}
-
-export const SelectMultiple = ({
-  name,
-  options,
-  errors,
-  control,
-  validation,
-  defaultValue,
-  disabled,
-}: ISelectProps & IReactHookFormProps): JSX.Element => {
-  return (
-    <Controller
-      {...{ control, name, defaultValue }}
-      rules={validation}
-      render={({ field: { onChange, value } }) => {
-        return (
-          <ReactSelect
-            value={value ?? ""}
-            className={clsx(styles.select, errors[name] && styles.error)}
-            isMulti
-            isDisabled={disabled}
-            {...{ options, onChange, errors }}
-            menuPortalTarget={document.body}
-            styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
-            placeholder={disabled ? "Disabled..." : "Select one or more options..."}
-          />
-        );
-      }}
-    />
-  );
-};
-
-export const SelectCreate = ({
-  name,
-  options,
-  errors,
-  control,
-  validation,
-  defaultValue,
-  disabled,
-}: ISelectProps & IReactHookFormProps): JSX.Element => {
-  return (
-    <Controller
-      {...{ control, name, defaultValue }}
-      rules={validation}
-      render={({ field: { onChange, value } }) => {
-        return (
-          <CreatableSelect
-            value={value ?? ""}
-            placeholder={disabled ? "Disabled..." : "Select or create one or multiple options..."}
-            className={clsx(styles.select, errors[name] && styles.error)}
-            isMulti
-            isDisabled={disabled}
-            {...{ options, onChange, errors }}
-            menuPortalTarget={document.body}
-            styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
-          />
-        );
-      }}
-    />
-  );
-};
-
-export const SelectSingle = ({
-  name,
-  options,
-  errors,
-  control,
-  validation,
-  isClearable,
-  defaultValue,
-  disabled,
-}: ISelectProps & IReactHookFormProps): JSX.Element => {
-  return (
-    <Controller
-      {...{ control, name, defaultValue }}
-      rules={validation}
-      render={({ field: { onChange, value } }) => {
-        return (
-          <ReactSelect
-            value={value ?? ""}
-            className={clsx(styles.select, errors[name] && styles.error)}
-            isDisabled={disabled}
-            {...{ options, onChange, errors, isClearable }}
-            menuPortalTarget={document.body}
-            styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
-            placeholder={disabled ? "Disabled..." : "Select an option..."}
-          />
-        );
-      }}
-    />
-  );
-};
+import * as styles from "./select.module.css";
+import { Control, Controller, FieldValues } from "react-hook-form";
+import ReactSelect from "react-select";
+import CreatableSelect from "react-select/creatable";
+import { IReactHookFormProps } from "../types";
+import clsx from "clsx";
+import { ErrorMessage } from "../errorMessage/ErrorMessage";
+
+interface ISelectProps {
+  control: Control<FieldValues, any>;
+  options: { label: string; value: string }[];
+  name: string;
+  defaultValue?: any;
+  disabled?: boolean;
+  isClearable?: boolean;
+  hideErrorMessage?: boolean;
+}
+
+export const SelectMultiple = ({
+  name,
+  options,
+  errors,
+  control,
+  validation,
+  defaultValue,
+  disabled,
+  hideErrorMessage,
+}: ISelectProps & IReactHookFormProps): JSX.Element => {
+  return (
+    <Controller
+      {...{ control, name, defaultValue }}
+      rules={validation}
+      render={({ field: { onChange, value } }) => {
+        return (
+          <>
+            <ReactSelect
+              value={value ?? ""}
+              className={clsx(styles.select, errors[name] && styles.error)}
+              isMulti
+              isDisabled={disabled}
+              {...{ options, onChange, errors }}
+              menuPortalTarget={document.body}
+              styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
+              placeholder={disabled ? "Disabled..." : "Select one or more options..."}
+            />
+            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+          </>
+        );
+      }}
+    />
+  );
+};
+
+export const SelectCreate = ({
+  name,
+  options,
+  errors,
+  control,
+  validation,
+  defaultValue,
+  disabled,
+  hideErrorMessage,
+}: ISelectProps & IReactHookFormProps): JSX.Element => {
+  return (
+    <Controller
+      {...{ control, name, defaultValue }}
+      rules={validation}
+      render={({ field: { onChange, value } }) => {
+        return (
+          <>
+            <CreatableSelect
+              value={value ?? ""}
+              placeholder={disabled ? "Disabled..." : "Select or create one or multiple options..."}
+              className={clsx(styles.select, errors[name] && styles.error)}
+              isMulti
+              isDisabled={disabled}
+              {...{ options, onChange, errors }}
+              menuPortalTarget={document.body}
+              styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
+            />
+            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+          </>
+        );
+      }}
+    />
+  );
+};
+
+export const SelectSingle = ({
+  name,
+  options,
+  errors,
+  control,
+  validation,
+  isClearable,
+  defaultValue,
+  disabled,
+  hideErrorMessage,
+}: ISelectProps & IReactHookFormProps): JSX.Element => {
+  return (
+    <Controller
+      {...{ control, name, defaultValue }}
+      rules={validation}
+      render={({ field: { onChange, value } }) => {
+        return (
+          <>
+            <ReactSelect
+              value={value ?? ""}
+              className={clsx(styles.select, errors[name] && styles.error)}
+              isDisabled={disabled}
+              {...{ options, onChange, errors, isClearable }}
+              menuPortalTarget={document.body}
+              styles={{ menuPortal: (base) => ({ ...base, zIndex: 100 }) }}
+              placeholder={disabled ? "Disabled..." : "Select an option..."}
+            />
+            {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+          </>
+        );
+      }}
+    />
+  );
+};

package/src/components/formFields/textarea.tsx

@@ -1,11 +1,12 @@
-import * as React from "react";
 import { TextArea } from "@gemeente-denhaag/textarea";
 import { IReactHookFormProps } from "./types";
+import { ErrorMessage } from "./errorMessage/ErrorMessage";
 
 export interface ITextAreaProps {
   name: string;
   disabled?: boolean;
   defaultValue?: string;
+  hideErrorMessage?: boolean;
 }
 
 export const Textarea = ({
@@ -15,6 +16,10 @@ export const Textarea = ({
   errors,
   disabled,
   defaultValue,
+  hideErrorMessage,
 }: ITextAreaProps & IReactHookFormProps): JSX.Element => (
-  <TextArea {...register(name, { ...validation })} {...{ disabled, defaultValue }} invalid={errors[name]} />
+  <>
+    <TextArea {...register(name, { ...validation })} {...{ disabled, defaultValue }} invalid={errors[name]} />
+    {errors[name] && !hideErrorMessage && <ErrorMessage message={errors[name].message} />}
+  </>
 );