diff --git a/web/src/features/dialog/InputDialog.tsx b/web/src/features/dialog/InputDialog.tsx
index 4af1280..f47de94 100644
--- a/web/src/features/dialog/InputDialog.tsx
+++ b/web/src/features/dialog/InputDialog.tsx
@@ -61,6 +61,7 @@ const InputDialog: React.FC = () => {
     setVisible(false);
     const values: any[] = [];
     Object.values(data.test).forEach((obj: { value: any }) => values.push(obj.value));
+    console.log(values);
     fetchNui('inputData', values);
     await new Promise((resolve) => setTimeout(resolve, 200));
     form.reset();
@@ -89,10 +90,18 @@ const InputDialog: React.FC = () => {
               return (
                 <React.Fragment key={item.id}>
                   {row.type === 'input' && (
-                    <InputField register={form.register(`test.${index}.value`)} row={row} index={index} />
+                    <InputField
+                      register={form.register(`test.${index}.value`, { required: row.required })}
+                      row={row}
+                      index={index}
+                    />
                   )}
                   {row.type === 'checkbox' && (
-                    <CheckboxField register={form.register(`test.${index}.value`)} row={row} index={index} />
+                    <CheckboxField
+                      register={form.register(`test.${index}.value`, { required: row.required })}
+                      row={row}
+                      index={index}
+                    />
                   )}
                   {row.type === 'select' && <SelectField row={row} index={index} control={form.control} />}
                   {row.type === 'number' && <NumberField control={form.control} row={row} index={index} />}
@@ -105,7 +114,7 @@ const InputDialog: React.FC = () => {
               <Button uppercase variant="default" onClick={handleClose} mr={3}>
                 {locale.ui.cancel}
               </Button>
-              <Button uppercase variant="light" onClick={handleClose} type="submit">
+              <Button uppercase variant="light" type="submit">
                 {locale.ui.confirm}
               </Button>
             </Group>
diff --git a/web/src/features/dialog/components/fields/checkbox.tsx b/web/src/features/dialog/components/fields/checkbox.tsx
index b2333cf..9fe0f8f 100644
--- a/web/src/features/dialog/components/fields/checkbox.tsx
+++ b/web/src/features/dialog/components/fields/checkbox.tsx
@@ -11,7 +11,13 @@ interface Props {
 
 const CheckboxField: React.FC<Props> = (props) => {
   return (
-    <Checkbox {...props.register} sx={{ display: 'flex' }} label={props.row.label} defaultChecked={props.row.checked} />
+    <Checkbox
+      {...props.register}
+      sx={{ display: 'flex' }}
+      required={props.row.required}
+      label={props.row.label}
+      defaultChecked={props.row.checked}
+    />
   );
 };
 
diff --git a/web/src/features/dialog/components/fields/color.tsx b/web/src/features/dialog/components/fields/color.tsx
index c1b3b41..03c87a2 100644
--- a/web/src/features/dialog/components/fields/color.tsx
+++ b/web/src/features/dialog/components/fields/color.tsx
@@ -14,6 +14,7 @@ const ColorField: React.FC<Props> = (props) => {
     name: `test.${props.index}.value`,
     control: props.control,
     defaultValue: props.row.default,
+    rules: { required: props.row.required },
   });
 
   return (
@@ -29,6 +30,7 @@ const ColorField: React.FC<Props> = (props) => {
       disabled={props.row.disabled}
       defaultValue={props.row.default}
       format={props.row.format}
+      withAsterisk={props.row.required}
     />
   );
 };
diff --git a/web/src/features/dialog/components/fields/input.tsx b/web/src/features/dialog/components/fields/input.tsx
index 017c3c2..de6f8d1 100644
--- a/web/src/features/dialog/components/fields/input.tsx
+++ b/web/src/features/dialog/components/fields/input.tsx
@@ -30,6 +30,7 @@ const InputField: React.FC<Props> = (props) => {
           icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
           placeholder={props.row.placeholder}
           disabled={props.row.disabled}
+          withAsterisk={props.row.required}
         />
       ) : (
         <PasswordInput
@@ -40,6 +41,7 @@ const InputField: React.FC<Props> = (props) => {
           icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
           placeholder={props.row.placeholder}
           disabled={props.row.disabled}
+          withAsterisk={props.row.required}
           visibilityToggleIcon={({ reveal, size }) => (
             <FontAwesomeIcon
               icon={reveal ? 'eye-slash' : 'eye'}
diff --git a/web/src/features/dialog/components/fields/number.tsx b/web/src/features/dialog/components/fields/number.tsx
index 79bc978..e8a39e7 100644
--- a/web/src/features/dialog/components/fields/number.tsx
+++ b/web/src/features/dialog/components/fields/number.tsx
@@ -16,6 +16,7 @@ const NumberField: React.FC<Props> = (props) => {
     name: `test.${props.index}.value`,
     control: props.control,
     defaultValue: props.row.default,
+    rules: { required: props.row.required },
   });
 
   return (
@@ -32,6 +33,7 @@ const NumberField: React.FC<Props> = (props) => {
       max={props.row.max}
       disabled={props.row.disabled}
       icon={props.row.icon && <FontAwesomeIcon icon={props.row.icon} fixedWidth />}
+      withAsterisk={props.row.required}
     />
   );
 };
diff --git a/web/src/features/dialog/components/fields/select.tsx b/web/src/features/dialog/components/fields/select.tsx
index ffdcc7c..d259d81 100644
--- a/web/src/features/dialog/components/fields/select.tsx
+++ b/web/src/features/dialog/components/fields/select.tsx
@@ -15,6 +15,7 @@ const SelectField: React.FC<Props> = (props) => {
     name: `test.${props.index}.value`,
     control: props.control,
     defaultValue: props.row.default,
+    rules: { required: props.row.required },
   });
 
   return (
@@ -28,6 +29,7 @@ const SelectField: React.FC<Props> = (props) => {
       disabled={props.row.disabled}
       label={props.row.label}
       description={props.row.description}
+      withAsterisk={props.row.required}
     />
   );
 };
diff --git a/web/src/interfaces/dialog.ts b/web/src/interfaces/dialog.ts
index 2d6f4ad..1d3efff 100644
--- a/web/src/interfaces/dialog.ts
+++ b/web/src/interfaces/dialog.ts
@@ -10,6 +10,7 @@ export interface IInput {
   icon?: IconProp;
   disabled?: boolean;
   description?: string;
+  required?: boolean;
 }
 
 export interface ICheckbox {
@@ -18,6 +19,7 @@ export interface ICheckbox {
   checked?: boolean;
   disabled?: boolean;
   description?: string;
+  required?: boolean;
 }
 
 export interface ISelect {
@@ -27,6 +29,7 @@ export interface ISelect {
   options: Array<SelectItem>;
   disabled?: boolean;
   description?: string;
+  required?: boolean;
 }
 
 export interface INumber {
@@ -39,6 +42,7 @@ export interface INumber {
   max?: number;
   disabled?: boolean;
   description?: string;
+  required?: boolean;
 }
 
 export interface ISlider {
@@ -59,4 +63,5 @@ export interface IColorInput {
   disabled?: boolean;
   description?: string;
   format?: 'hex' | 'hexa' | 'rgb' | 'rgba' | 'hsl' | 'hsla';
+  required?: boolean;
 }