148 lines
3.2 KiB
Vue
148 lines
3.2 KiB
Vue
<script setup>
|
|
const firstName = ref('')
|
|
const email = ref('')
|
|
const mobile = ref()
|
|
const password = ref()
|
|
const checkbox = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<VForm @submit.prevent="() => {}">
|
|
<VRow>
|
|
<!-- 👉 First Name -->
|
|
<VCol cols="12">
|
|
<VRow no-gutters>
|
|
<VCol
|
|
cols="12"
|
|
md="3"
|
|
>
|
|
<label for="firstNameHorizontalIcons">First Name</label>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="9"
|
|
>
|
|
<VTextField
|
|
id="firstNameHorizontalIcons"
|
|
v-model="firstName"
|
|
prepend-inner-icon="bx-user"
|
|
placeholder="John"
|
|
persistent-placeholder
|
|
/>
|
|
</VCol>
|
|
</VRow>
|
|
</VCol>
|
|
|
|
<!-- 👉 Email -->
|
|
<VCol cols="12">
|
|
<VRow no-gutters>
|
|
<VCol
|
|
cols="12"
|
|
md="3"
|
|
>
|
|
<label for="emailHorizontalIcons">Email</label>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="9"
|
|
>
|
|
<VTextField
|
|
id="emailHorizontalIcons"
|
|
v-model="email"
|
|
prepend-inner-icon="bx-envelope"
|
|
placeholder="johndoe@email.com"
|
|
persistent-placeholder
|
|
/>
|
|
</VCol>
|
|
</VRow>
|
|
</VCol>
|
|
|
|
<!-- 👉 Mobile -->
|
|
<VCol cols="12">
|
|
<VRow no-gutters>
|
|
<VCol
|
|
cols="12"
|
|
md="3"
|
|
>
|
|
<label for="mobileHorizontalIcons">Mobile</label>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="9"
|
|
>
|
|
<VTextField
|
|
id="mobileHorizontalIcons"
|
|
v-model="mobile"
|
|
type="number"
|
|
prepend-inner-icon="bx-mobile"
|
|
placeholder="+1 123 456 7890"
|
|
persistent-placeholder
|
|
/>
|
|
</VCol>
|
|
</VRow>
|
|
</VCol>
|
|
|
|
<!-- 👉 Password -->
|
|
<VCol cols="12">
|
|
<VRow no-gutters>
|
|
<VCol
|
|
cols="12"
|
|
md="3"
|
|
>
|
|
<label for="passwordHorizontalIcons">Password</label>
|
|
</VCol>
|
|
|
|
<VCol
|
|
cols="12"
|
|
md="9"
|
|
>
|
|
<VTextField
|
|
id="passwordHorizontalIcons"
|
|
v-model="password"
|
|
prepend-inner-icon="bx-lock"
|
|
autocomplete="on"
|
|
type="password"
|
|
placeholder="············"
|
|
persistent-placeholder
|
|
/>
|
|
</VCol>
|
|
</VRow>
|
|
</VCol>
|
|
|
|
<!-- 👉 Checkbox -->
|
|
<VCol
|
|
offset-md="3"
|
|
cols="12"
|
|
md="9"
|
|
>
|
|
<VCheckbox
|
|
v-model="checkbox"
|
|
label="Remember me"
|
|
/>
|
|
</VCol>
|
|
|
|
<!-- 👉 submit and reset button -->
|
|
<VCol
|
|
offset-md="3"
|
|
cols="12"
|
|
md="9"
|
|
class="d-flex gap-4"
|
|
>
|
|
<VBtn type="submit">
|
|
Submit
|
|
</VBtn>
|
|
<VBtn
|
|
color="secondary"
|
|
type="reset"
|
|
variant="tonal"
|
|
>
|
|
Reset
|
|
</VBtn>
|
|
</VCol>
|
|
</VRow>
|
|
</VForm>
|
|
</template>
|