Textarea

Takes free text over more than one line, such as a description or a remark.

<script setup lang="ts">
import { FsField, FsTextarea } from '@fivespark/ui'
import { ref } from 'vue'

const omschrijving = ref('')
</script>

<template>
  <FsField label="Omschrijving" class="w-full max-w-md">
    <FsTextarea v-model="omschrijving" />
  </FsField>
</template>

Usage

<script setup lang="ts">
import { FsField, FsTextarea } from '@fivespark/ui'
import { ref } from 'vue'

const omschrijving = ref('')
</script>

<template>
  <FsField label="Omschrijving">
    <FsTextarea v-model="omschrijving" />
  </FsField>
</template>

Put the textarea in a Field, which gives it its label, description and error, and its id, size and states. For a single line of text, use Input. It takes no type or placeholder.

Examples

Rows

It grows with its content from rows lines up to maxRows, then scrolls.

<script setup lang="ts">
import { FsField, FsTextarea } from '@fivespark/ui'
import { ref } from 'vue'

const opmerking = ref('')
</script>

<template>
  <FsField label="Opmerking voor de monteur" description="Zichtbaar op de werkbon." class="w-full max-w-md">
    <FsTextarea v-model="opmerking" :rows="2" :max-rows="6" />
  </FsField>
</template>

Character limit

maxLength counts the characters left under the field. It can be exceeded, so a paste is never cut short; over the limit, the field is invalid.

<script setup lang="ts">
import { FsField, FsTextarea } from '@fivespark/ui'
import { ref } from 'vue'

const bericht = ref('Graag de sleutel ophalen bij de buren.')
</script>

<template>
  <FsField label="Bericht aan de klant" class="w-full max-w-md">
    <FsTextarea v-model="bericht" :max-length="280" />
  </FsField>
</template>

Invalid

The field's error says what is wrong, in one plain sentence, and marks the textarea invalid.

<script setup lang="ts">
import { FsField, FsTextarea } from '@fivespark/ui'
import { ref } from 'vue'

const reden = ref('')
</script>

<template>
  <FsField label="Reden van annulering" required error="Vul de reden in." class="w-full max-w-md">
    <FsTextarea v-model="reden" />
  </FsField>
</template>

Disabled and read-only

A disabled textarea is unavailable until something else is done. A read-only one shows text to see and copy but not change, and is submitted; say why in the description.

<script setup lang="ts">
import { FsField, FsTextarea } from '@fivespark/ui'
import { ref } from 'vue'

const intern = ref('Klant belt zelf terug.')
const vastgesteld = ref('Montage in week 47.')
</script>

<template>
  <div class="flex w-full max-w-md flex-col gap-4">
    <FsField label="Interne notitie" disabled>
      <FsTextarea v-model="intern" />
    </FsField>
    <FsField label="Planningsnotitie" description="Vastgesteld door de planner." readonly>
      <FsTextarea v-model="vastgesteld" />
    </FsField>
  </div>
</template>

Keyboard

Key	Does
Enter	Starts a new line
Tab	Moves focus to the next control

API Reference

FsTextarea

Prop	Type	Default	Description
size	"default" | "dense"		`default`, or `dense` with less padding, for tables and side panels. In a field, the field's.
id	string		Only outside a field; in one, it takes the field's.
invalid	boolean		Marks the value as wrong; the field says why. In a field, the field's. Over `maxLength` it is invalid regardless.
disabled	boolean		Unavailable until something else is done: not focusable, not submitted. A value to see but not change is `readonly`. In a field, the field's.
readonly	boolean		A value to see and copy, not change: shown as plain text. In a field, the field's.
required	boolean		In a field, the field's, which also shows the asterisk.
rows	number	3	The lowest it is, in lines, empty or not.
maxRows	number	10	The most lines it grows to before the text scrolls, or is dragged to in a browser that cannot grow it.
maxLength	number		A limit that counts down below the field and can be exceeded, so a paste is never cut short; over it the field is invalid. A line break counts as one character, as `value.length` does, but is submitted as two: a limit on the server must count the same way.
countTexts	{ limit?: ((max: number) => string) | undefined; remaining?: ((n: number) => string) | undefined; over?: ((n: number) => string) | undefined; }		Replaces the count's messages, each a function of the number: the hidden limit, the characters left, the characters over.
modelValue	string		The text. Without `v-model` it keeps its own.

Event	Payload	Description
update:modelValue	[value: string | undefined]	Sent with the new `modelValue`, for `v-model`.