diff --git a/src/DuoInput/DuoInput.jsx b/src/DuoInput/DuoInput.jsx
index 81b6e0eb7ba66aa39e7632633516a2d6b85c34a3..932aecba360a582b7285a236803e7174da4a3b65 100644
--- a/src/DuoInput/DuoInput.jsx
+++ b/src/DuoInput/DuoInput.jsx
@@ -1,6 +1,11 @@
 import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
 
-export default function DuoInput({label, onChange, values, layout = 'column'}) {
+export default function DuoInput({label, onChange, values, layout = 'column',  units = [
+	{label: 'px', value: 'px'},
+	{label: '%', value: '%'},
+	{label: 'em', value: 'em'},
+	{label: 'pt', value: 'pt'},
+]}) {
 
 	const keys = Object.keys(values);
 	const valuesArray = Object.values(values);
@@ -22,6 +27,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) {
 					<NumberWithUnit
 						className='fi-duo-field fi-duo-field-input'
 						value={valuesArray[0]}
+						units={units}
 						onChange={(e) => {
 							handleChange(0, e)
 						}}
@@ -29,6 +35,7 @@ export default function DuoInput({label, onChange, values, layout = 'column'}) {
 					<NumberWithUnit
 						className='fi-duo-field fi-duo-field-input'
 						value={valuesArray[1]}
+						units={units}
 						onChange={(e) => handleChange(1, e)}
 					/>
 				</div>
diff --git a/src/NumberWithUnit/NumberWithUnit.jsx b/src/NumberWithUnit/NumberWithUnit.jsx
index b4853afdd19f431804f6c3d4f863756b50d292a4..981ac5b713544a5385c906ab44cc9dfe6ac4e7a5 100644
--- a/src/NumberWithUnit/NumberWithUnit.jsx
+++ b/src/NumberWithUnit/NumberWithUnit.jsx
@@ -1,11 +1,19 @@
 import {SelectControl, TextControl} from "@wordpress/components";
 import {useState} from "react";
 
-export default function NumberWithUnit({label, onChange, value, className}) {
+export default function NumberWithUnit({
+										   label, onChange, value, className,
+										   units = [
+											   {label: 'px', value: 'px'},
+											   {label: '%', value: '%'},
+											   {label: 'em', value: 'em'},
+											   {label: 'pt', value: 'pt'},
+										   ]
+									   }) {
 
 	const splitValues = function (fontSize) {
 
-		if( !fontSize ) {
+		if (!fontSize) {
 			return {size: "0", unit: "px"};
 		}
 
@@ -24,7 +32,6 @@ export default function NumberWithUnit({label, onChange, value, className}) {
 	const [size, setSize] = useState(splitValues(value).size);
 
 
-
 	const handleChange = (newSize, newUnit) => {
 		if (onChange) {
 			onChange(newSize + newUnit);
@@ -37,7 +44,8 @@ export default function NumberWithUnit({label, onChange, value, className}) {
 			<div className='fi-field-label-wrapper'>
 				<span className='fi-field-label'>{label}</span>
 			</div>
-			<div className={'fi-field-buttons-wrapper fi-input-with-columns fi-numberwithfields-wrapper' + ' ' + className}>
+			<div
+				className={'fi-field-buttons-wrapper fi-input-with-columns fi-numberwithfields-wrapper' + ' ' + className}>
 				<TextControl
 					style={{flex: 3}}
 					type={'number'}
@@ -49,13 +57,8 @@ export default function NumberWithUnit({label, onChange, value, className}) {
 					}}
 				/>
 				<SelectControl
-					options={[
-						{label: 'px', value: 'px'},
-						{label: '%', value: '%'},
-						{label: 'em', value: 'em'},
-						{label: 'pt', value: 'pt'},
-					]}
-					style={{minWidth:'56px'}}
+					options={units}
+					style={{minWidth: '56px'}}
 					value={unit}
 					onChange={(value) => {
 						setUnit(value);
diff --git a/src/QuatroInput/QuatroInput.jsx b/src/QuatroInput/QuatroInput.jsx
index 15e2795acd6b66bcb41b48a8bef817f6b842cb0e..724481d44618cc5b814585a7937373e1dbbaa43d 100644
--- a/src/QuatroInput/QuatroInput.jsx
+++ b/src/QuatroInput/QuatroInput.jsx
@@ -1,6 +1,13 @@
 import NumberWithUnit from "../NumberWithUnit/NumberWithUnit";
 
-export default function QuatroInput({label, onChange, values, layout = 'cross'}) {
+export default function QuatroInput({
+										label, onChange, values, layout = 'cross', units = [
+		{label: 'px', value: 'px'},
+		{label: '%', value: '%'},
+		{label: 'em', value: 'em'},
+		{label: 'pt', value: 'pt'}
+	]
+									}) {
 
 	const keys = Object.keys(values);
 	const valuesArray = Object.values(values);
@@ -23,6 +30,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[0]}
+							units={units}
 							onChange={(e) => {
 								handleChange(0, e)
 							}}
@@ -32,11 +40,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[1]}
+							units={units}
 							onChange={(e) => handleChange(1, e)}
 						/>
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[2]}
+							units={units}
 							onChange={(e) => handleChange(2, e)}
 						/>
 					</div>
@@ -44,6 +54,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[3]}
+							units={units}
 							onChange={(e) => handleChange(3, e)}
 						/>
 					</div>
@@ -54,6 +65,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[0]}
+							units={units}
 							onChange={(e) => {
 								handleChange(0, e)
 							}}
@@ -61,6 +73,7 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[1]}
+							units={units}
 							onChange={(e) => handleChange(1, e)}
 						/>
 					</div>
@@ -68,11 +81,13 @@ export default function QuatroInput({label, onChange, values, layout = 'cross'})
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[2]}
+							units={units}
 							onChange={(e) => handleChange(2, e)}
 						/>
 						<NumberWithUnit
 							className='fi-quatro-field fi-quatro-field-input'
 							value={valuesArray[3]}
+							units={units}
 							onChange={(e) => handleChange(3, e)}
 						/>
 					</div>