Logo

Icons

<v-container>
  <v-row>
    <v-col cols="12" sm="6">
      <v-textarea
        class="mx-2"
        label="prepend-icon"
        rows="1"
        prepend-icon="comment"
      ></v-textarea>
    </v-col>
    <v-col cols="12" sm="6">
      <v-textarea
        append-icon="comment"
        class="mx-2"
        label="append-icon"
        rows="1"
      ></v-textarea>
    </v-col>
    <v-col cols="12" sm="6">
      <v-textarea
        prepend-inner-icon="comment"
        class="mx-2"
        label="prepend-inner-icon"
        rows="1"
      ></v-textarea>
    </v-col>
    <v-col cols="12" sm="6">
      <v-textarea
        append-outer-icon="comment"
        class="mx-2"
        label="append-outer-icon"
        rows="1"
      ></v-textarea>
    </v-col>
  </v-row>
</v-container>

The append-icon and prepend-icon props help add context to v-textarea.

Browser autocomplete

<v-container fluid>
  <v-textarea
    autocomplete="email"
    label="Email"
  ></v-textarea>
</v-container>

The autocomplete prop gives you the option to enable the browser to predict user input.

Auto grow

<v-container fluid>
  <v-textarea
    name="input-7-1"
    filled
    label="Label"
    auto-grow
    value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
  ></v-textarea>
</v-container>

When using the auto-grow prop, textarea's will automatically increase in size when the contained text exceeds its size.

Clearable

<v-container fluid>
  <v-textarea
    name="input-7-1"
    filled
    label="Label"
    auto-grow
    value="The Woodman set to work at once, and so sharp was his axe that the tree was soon chopped nearly through."
  ></v-textarea>
</v-container>

You can clear the text from a v-textarea by using the clearable prop, and customize the icon used with the clearable-icon prop.