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

<script setup lang="ts">
import Textarea from '~/components/ui/Textarea.vue'

import { ref } from 'vue'

const text1 = ref('# Funk\nwhale')
const text2 = ref('# Funk\nwhale')
const text3 = ref('')
</script>

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

```vue-html{2}
<Textarea
  v-model="text" label="My Area"
/>
```

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

## Textarea max length

You can set the maximum length (in characters) that a user can enter in a textarea by passing a `max` prop.

```vue-html{3}
<Textarea
  v-model="text"
  :max="20"
/>
```

<ClientOnly>
  <Textarea v-model="text2" :max="20" />
</ClientOnly>

## Textarea placeholder

Add a placeholder to a textarea to guide users on what they should enter by passing a `placeholder` prop.

```vue-html{3}
<Textarea
  v-model="text"
  placeholder="Describe this track here…"
/>
```

<ClientOnly>
  <Textarea v-model="text3" placeholder="Describe this track here…" />
</ClientOnly>

## Label slot

```vue-html{2-4}
<Textarea>
  <template #label>
    About my music
  </template>
</Textarea>
```

<Textarea>
  <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
<Textarea label="About my music" />
```

<Textarea label="About my music" />