diff --git a/src/lib/elements/forms/inputEmail.svelte b/src/lib/elements/forms/inputEmail.svelte
index e032d795a..dea1c2a25 100644
--- a/src/lib/elements/forms/inputEmail.svelte
+++ b/src/lib/elements/forms/inputEmail.svelte
@@ -4,6 +4,7 @@
     import NullCheckbox from './nullCheckbox.svelte';
 
     export let label: string;
+    export let optionalText: string | undefined = undefined;
     export let showLabel = true;
     export let id: string;
     export let value = '';
@@ -54,7 +55,7 @@
 </script>
 
 <FormItem>
-    <Label {required} hide={!showLabel} for={id}>
+    <Label {required} {optionalText} hide={!showLabel} for={id}>
         {label}
     </Label>
 
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
index 7e629141e..f8d7995f2 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/url.svelte
@@ -34,7 +34,7 @@
 </script>
 
 <script lang="ts">
-    import { InputText, InputChoice } from '$lib/elements/forms';
+    import { InputChoice, InputURL } from '$lib/elements/forms';
 
     export let data: Partial<Models.AttributeUrl>;
     export let editing = false;
@@ -44,7 +44,7 @@
     }
 </script>
 
-<InputText
+<InputURL
     id="default"
     label="Default value"
     placeholder="Enter value"
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/email.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/email.svelte
new file mode 100644
index 000000000..8d77c6a43
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/email.svelte
@@ -0,0 +1,19 @@
+<script lang="ts">
+    import InputEmail from '$lib/elements/forms/inputEmail.svelte';
+    import type { Models } from '@appwrite.io/console';
+
+    export let id: string;
+    export let label: string;
+    export let value: string | null;
+    export let optionalText: string | undefined = undefined;
+    export let attribute: Models.AttributeUrl;
+</script>
+
+<InputEmail
+    {id}
+    {label}
+    {optionalText}
+    placeholder="Enter URL"
+    showLabel={!!label?.length}
+    required={attribute.required}
+    bind:value />