<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
.
<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.
<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.
<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.