On this page

Text area field

The text area field stores strings with line breaks.

Examples

Here's an example of using the text area field in a block:

# blocks/Code.vue

<template>
  <pre>
    <code>{{ code }}</code>
  </pre>
</template>

<script lang="ts" setup>
import { textAreaField } from '#pruvious'

defineProps({
  code: textAreaField({
    placeholder: 'Enter code here',
  }),
})
</script>

Here is another example of how to use it in a collection definition:

# collections/settings.ts

import { defineCollection } from '#pruvious'

export default defineCollection({
  name: 'settings',
  mode: 'single',
  fields: {
    trackingScript: {
      type: 'text-area',
      options: {},
    },
  },
})

Options

You can specify the following options in the text area field:

Option	Description
`default`	The default field value (an empty string if not defined).
`description`	A brief descriptive text displayed in code comments and in a tooltip at the upper right corner of the field.
`label`	The field label displayed in the UI. By default, it is automatically generated based on the property name assigned to the field. For example, description becomes Description.
`name`	A string that specifies the `name` for the input control. If not specified, the `name` attribute will be automatically generated.
`placeholder`	Text that appears in the input element when it has no value set.
`required`	Specifies that the input field is mandatory during creation and cannot have an empty string value.
`spellcheck`	A booleanish value indicating whether spellchecking is enabled for the input element. Defaults to `'false'`.
`trim`	Specifies whether to remove whitespace from both ends of the input string.
`wrap`	Specifies whether the text in the field should be automatically wrapped. If `false`, the text will only wrap on enter or hard breaks. Defaults to `true`.

Last updated on January 9, 2024 at 11:20

Text

Time