Как я могу изменить расположение текстовых полей в vuetify?

Question

Я хочу изменить способ разметки текстовых полей. Мои текущие разметки выглядят так:

Я хочу, чтобы макет отображался так:

Мой код пока что:

<template>
    <v-card
        max-width="1200"
        class="mx-auto"
    >
      <v-container
        class="pa-2"
        fluid
      >
        <v-form
            ref="form"
            v-model="valid"
            lazy-validation
        >
            <v-text-field
            v-model="name"
            :counter="10"
            :rules="nameRules"
            label="Name"
            required
            ></v-text-field>

            <v-text-field
            v-model="email"
            :rules="emailRules"
            label="E-mail"
            required
            ></v-text-field>
        </v-form>
      </v-container>
    </v-card>
</template>

Результат выглядит так:

Я хочу изменить результат так:

Answer 1

Вы можете использовать свойство outlined, чтобы текстовые поля отображались с рамкой.

См. примеры здесь