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 formatted text (format: Markdown). These blocks are used throughout the Funkwhale interface for entering item descriptions, moderation notes, and custom notifications.

::: details Props

const {
  charLimit = 5000,
  placeholder = "",
  minLines = 3,
  ...props
} = defineProps<{
  label?: string;
  placeholder?: string;
  charLimit?: number;
  minLines?: number | string;
  autofocus?: true;
  required?: true;
}>();

:::

Create a textarea and attach its input to a value using a v-model of type string (required):

const text = ref("# Funk\nwhale");

<Textarea v-model="text" />

## Add a label ```vue-html{3-5} <Spacer size="16" /> <Textarea> <template #label> About my music <span style="color:red; float:right;">*required</span> </template>

<Spacer size="16" />
<Textarea v-model="text">
  <template #label>
    About my music <span style="color:red; float:right;">*required</span>
  </template>
</Textarea>

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

```vue-html
<Spacer size="16" />
<Textarea v-model="text" label="About my music" />

<p dir="auto">Note that the label text sits atop of the upper end of the component. This way, you can define the distance between baselines (the vertical rhythm) with spacers or gaps.</p> <h2 id="user-content-add-a-placeholder" dir="auto">Add a placeholder</h2> <pre class="code-block"><code class="chroma language-vue-html{3} display"><Textarea v-model="text" placeholder="Describe this track here…" /> </code></pre><Textarea v-model="text3" placeholder="Describe this track here…" /> ## Limit the number of characters You can set the maximum length (in characters) that a user can enter in a textarea by passing a `charLimit` prop. ```vue-html{3} <Textarea v-model="text" :charLimit="20" /> ``` <Textarea v-model="text2" :charLimit="20" /> ::: warning Caveats - You can still set the model longer than allowed by changing it via a script or another Textarea - A line break counts as one character, which may confuse users - The character counting algorithm has not been tested on non-Latin based languages ::: ## Set the initial height Specify the number of lines with the `initial-lines` prop (the default is 5): ```vue-html <Textarea v-model="text" initial-lines="1" /> ``` <Textarea v-model="text3" initialLines="1" /> ## Autofocus If you add the `autofocus` attribute, the text input field will receive focus as soon as it is rendered on the page. Make sure to only add this prop to a single component per page! ## Require this form to be filled before submitting The `required` attribute prevents the `submit` button of this form. Make sure to also add an indicator such as the text "required" or a star to prevent confusion. See [mdn on the `required` attribute](<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required" class="link">https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/required</a>) if you want to know more. ## Additional attributes Any prop that is not declared in the `Props` type will be added to the `<textarea>` element directly. See [mdn on `textarea` attributes here](<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea" class="link">https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea</a>). Examples: `autocomplete`, `cols`, `minlength`, `readonly`, `wrap`, `disabled` etc. ## Add custom toolbar items By default, there are text formatting buttons and a 'preview' toggle button in the toolbar. You can add custom content there by adding them into the default slot. They will be drawn before the `preview` button. ```vue-html <Textarea v-model="text"> <Button ghost low-height min-content v-if="text !== ''" icon="bi-arrow-counterclockwise" @click.prevent="reset()">Reset</Button>

<Textarea v-model="text">
  <Spacer no-size grow />
  <Button ghost low-height min-content
    v-if="text !== ''"
    icon="bi-arrow-counterclockwise"
    @click.prevent="reset()">Reset</Button>
</Textarea>