funkwhale/front/ui-docs/components/ui/textarea.md

import Textarea from "~/components/ui/Textarea.vue"

Textarea

Textareas are input blocks that enable users to write in textual information. These blocks are used throughout the Funkwhale interface for entering item descriptions, moderation notes, and custom notifications.

::: tip Funkwhale supports Markdown syntax in textarea blocks. :::

Prop	Data type	Required?	Description
max	Number	No	The maximum number of characters a user can enter in the textarea.
placeholder	String	No	The placeholder text shown on an empty textarea.
v-model:value	String	Yes	The text entered into the textarea.

Textarea model

Create a textarea and attach its input to a value using a v-model directive.

<Textarea
  v-model="text" label="My Area"
/>

</ClientOnly> <h2 id="user-content-textarea-max-length" dir="auto">Textarea max length</h2> <p dir="auto">You can set the maximum length (in characters) that a user can enter in a textarea by passing a <code>max</code> prop.</p> <pre class="code-block"><code class="chroma language-vue-html{3}"><Textarea v-model="text" :max="20" /> </code></pre><ClientOnly> <Textarea v-model="text2" :max="20" /> </ClientOnly> <h2 id="user-content-textarea-placeholder" dir="auto">Textarea placeholder</h2> <p dir="auto">Add a placeholder to a textarea to guide users on what they should enter by passing a <code>placeholder</code> prop.</p> <pre class="code-block"><code class="chroma language-vue-html{3}"><Textarea v-model="text" placeholder="Describe this track here…" /> </code></pre><ClientOnly> <Textarea v-model="text3" placeholder="Describe this track here…" /> </ClientOnly> <h2 id="user-content-label-slot" dir="auto">Label slot</h2> <pre class="code-block"><code class="chroma language-vue-html{2-4}"><Textarea> <template #label> About my music </template> </Textarea> </code></pre><Textarea> <template #label> About my music <span style="color:red; float:right;">*required</span> </template>

If you just have a string, we have a convenience prop, so instead you can write:

<Textarea label="About my music" />

</body></html>