diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
index 609687700..9c56d3d44 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/createIndex.svelte
@@ -9,6 +9,7 @@
     import type { Attributes } from '../store';
     import { invalidate } from '$app/navigation';
     import { Dependencies } from '$lib/constants';
+    import Select from './select.svelte';
 
     export let showCreateIndex = false;
     export let externalAttribute: Attributes = null;
@@ -22,7 +23,7 @@
         { value: 'fulltext', label: 'FullText' }
     ];
     let newAttr = false;
-    let selectedType = '';
+    let selectedType = 'key';
     $: attributeOptions = $collection.attributes.map((attribute: Attributes) => ({
         value: attribute.key,
         label: attribute.key
@@ -40,7 +41,8 @@
 
     $: if (showCreateIndex) {
         attributeList = [];
-        selectedType = selectedOrder = selectedAttribute = '';
+        selectedOrder = selectedAttribute = '';
+        selectedType = 'key';
         key = null;
     }
     const created = async () => {
@@ -95,36 +97,28 @@
             {#each attributeList as index, i}
                 <li class="form-item is-multiple">
                     <div class="form-item-part u-stretch">
-                        <label class="label" for="attribute">Attribute</label>
-                        <div class="select">
-                            <select id="attribute" bind:value={index.value}>
-                                <optgroup label="Internal">
-                                    <option value="$id">$id</option>
-                                    <option value="$createdAt">$createdAt</option>
-                                    <option value="$updatedAt">$updatedAt</option>
-                                </optgroup>
-                                <optgroup label="Attributes">
-                                    {#each attributeOptions as option}
-                                        <option
-                                            value={option.value}
-                                            selected={option.value === selectedAttribute}>
-                                            {option.label}
-                                        </option>
-                                    {/each}
-                                </optgroup>
-                            </select>
-                            <span class="icon-cheveron-down" aria-hidden="true" />
-                        </div>
+                        <Select id="attribute" label="Attribute" bind:value={index.value}>
+                            <optgroup label="Internal">
+                                <option value="$id">$id</option>
+                                <option value="$createdAt">$createdAt</option>
+                                <option value="$updatedAt">$updatedAt</option>
+                            </optgroup>
+                            <optgroup label="Attributes">
+                                {#each attributeOptions as option}
+                                    <option
+                                        value={option.value}
+                                        selected={option.value === selectedAttribute}>
+                                        {option.label}
+                                    </option>
+                                {/each}
+                            </optgroup>
+                        </Select>
                     </div>
                     <div class="form-item-part u-stretch">
-                        <label class="label" for="order">Order</label>
-                        <div class="select">
-                            <select id="order" bind:value={index.order}>
-                                <option value="ASC"> ASC </option>
-                                <option value="DESC"> DESC </option>
-                            </select>
-                            <span class="icon-cheveron-down" aria-hidden="true" />
-                        </div>
+                        <Select id="order" label="Order" bind:value={index.order}>
+                            <option value="ASC"> ASC </option>
+                            <option value="DESC"> DESC </option>
+                        </Select>
                     </div>
 
                     <div class="form-item-part u-cross-child-end">
@@ -144,40 +138,36 @@
         {#if !attributeList?.length || newAttr}
             <li class="form-item is-multiple">
                 <div class="form-item-part u-stretch">
-                    <label class="label" for="attribute">Attribute</label>
-                    <div class="select">
-                        <select required id="attribute" bind:value={selectedAttribute}>
-                            <option value="" disabled selected hidden>Select Attribute</option>
+                    <Select
+                        id="attribute"
+                        label="Attribute"
+                        required
+                        bind:value={selectedAttribute}>
+                        <option value="" disabled selected hidden>Select Attribute</option>
 
-                            <optgroup label="Internal">
-                                <option value="$id">$id</option>
-                                <option value="$createdAt">$createdAt</option>
-                                <option value="$updatedAt">$updatedAt</option>
-                            </optgroup>
-                            <optgroup label="Attributes">
-                                {#each attributeOptions as option}
-                                    <option
-                                        value={option.value}
-                                        selected={option.value === selectedAttribute}>
-                                        {option.label}
-                                    </option>
-                                {/each}
-                            </optgroup>
-                        </select>
-                        <span class="icon-cheveron-down" aria-hidden="true" />
-                    </div>
+                        <optgroup label="Internal">
+                            <option value="$id">$id</option>
+                            <option value="$createdAt">$createdAt</option>
+                            <option value="$updatedAt">$updatedAt</option>
+                        </optgroup>
+                        <optgroup label="Attributes">
+                            {#each attributeOptions as option}
+                                <option
+                                    value={option.value}
+                                    selected={option.value === selectedAttribute}>
+                                    {option.label}
+                                </option>
+                            {/each}
+                        </optgroup>
+                    </Select>
                 </div>
                 <div class="form-item-part u-stretch">
-                    <label class="label" for="order">Order</label>
-                    <div class="select">
-                        <select id="order" bind:value={selectedOrder}>
-                            <option value="" disabled selected hidden>Select Order</option>
+                    <Select id="order" label="Order" required bind:value={selectedOrder}>
+                        <option value="" disabled selected hidden>Select Order</option>
 
-                            <option value="ASC"> ASC </option>
-                            <option value="DESC"> DESC </option>
-                        </select>
-                        <span class="icon-cheveron-down" aria-hidden="true" />
-                    </div>
+                        <option value="ASC"> ASC </option>
+                        <option value="DESC"> DESC </option>
+                    </Select>
                 </div>
 
                 <div class="form-item-part u-cross-child-end">
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte
new file mode 100644
index 000000000..189da2d41
--- /dev/null
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/indexes/select.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+    import Helper from '$lib/elements/forms/helper.svelte';
+
+    export let value: string;
+    export let id: string;
+    export let label: string;
+    export let required = false;
+
+    let element: HTMLSelectElement;
+
+    let error: string;
+
+    const handleInvalid = (event: Event) => {
+        console.log('test');
+        event.preventDefault();
+
+        if (element.validity.valueMissing) {
+            error = 'This field is required';
+            return;
+        }
+        error = element.validationMessage;
+    };
+
+    $: if (value) {
+        error = null;
+    }
+</script>
+
+<label class="label" for={id}>{label}</label>
+<div class="select">
+    <select bind:this={element} {id} bind:value {required} on:invalid={handleInvalid}>
+        <slot />
+    </select>
+    <span class="icon-cheveron-down" aria-hidden="true" />
+</div>
+{#if error}
+    <Helper type="warning">{error}</Helper>
+{/if}