diff --git a/package.json b/package.json
index 1ad917f..c6d70fb 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "private": false,
   "name": "bluelib",
-  "version": "0.12.2",
+  "version": "0.12.3",
   "license": "AGPL-3.0-or-later",
   "source": "src/index.js",
   "main": "dist/index.js",
diff --git a/src/components/Layout/HButton.js b/src/components/Layout/HButton.js
index fd8b61e..19c9df1 100644
--- a/src/components/Layout/HButton.js
+++ b/src/components/Layout/HButton.js
@@ -1,12 +1,22 @@
 import style from './HButton.less';
+import {concatClass} from "../../index";
 
 export default function (props) {
+	let validityClass = null;
+	if(props.validity === true) {
+		validityClass = style.valid;
+	}
+	else if(props.validity === false) {
+		validityClass = style.invalid;
+	}
+
+
 	return (
 		<label className={style.label}>
 			<div className={style.text}>{props.label}</div>
 			<button
 				onClick={props.disabled ? null : props.onClick}
-				className={style.button}
+				className={concatClass(style.button, validityClass)}
 				disabled={props.disabled}
 			>
 				{props.children}
diff --git a/src/components/Layout/HButton.less b/src/components/Layout/HButton.less
index 595abd1..21abc6a 100644
--- a/src/components/Layout/HButton.less
+++ b/src/components/Layout/HButton.less
@@ -19,3 +19,11 @@
     margin-left: 4px;
     flex-grow: 2;
 }
+
+.valid {
+    border: 1px solid @lime !important;
+}
+
+.invalid {
+    border: 1px solid @red !important;
+}
diff --git a/src/components/Layout/HInput.js b/src/components/Layout/HInput.js
index 9d44306..d5164e3 100644
--- a/src/components/Layout/HInput.js
+++ b/src/components/Layout/HInput.js
@@ -1,10 +1,19 @@
 import style from './HInput.less';
+import {concatClass} from "../../index";
 
 export default function (props) {
+	let validityClass = null;
+	if(props.validity === true) {
+		validityClass = style.valid;
+	}
+	else if(props.validity === false) {
+		validityClass = style.invalid;
+	}
+
 	return (
 		<label className={style.label}>
 			<div className={style.text}>{props.label}</div>
-			<input className={style.input} type={props.type} value={props.value}
+			<input className={concatClass(style.input, validityClass)} type={props.type} value={props.value}
 				   onChange={props.onChange} disabled={props.disabled} name={props.name}/>
 		</label>
 	);
diff --git a/src/components/Layout/HInput.less b/src/components/Layout/HInput.less
index 16936d4..b593893 100644
--- a/src/components/Layout/HInput.less
+++ b/src/components/Layout/HInput.less
@@ -19,3 +19,11 @@
     margin-left: 4px;
     flex-grow: 2;
 }
+
+.valid {
+    border: 1px solid @lime !important;
+}
+
+.invalid {
+    border: 1px solid @red !important;
+}