On this page

Text field

The text field is the most frequently used field for storing strings.

Examples

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

# blocks/Section.vue

<template>
  <div>
    <h2 v-if="title">{{ title }}</h2>
    <slot />
  </div>
</template>

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

defineProps({
  title: textField({
    placeholder: 'Enter a title',
  }),
})
</script>

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

# collections/subscribers.ts

import { defineCollection } from '#pruvious'
import { emailValidator, uniqueValidator } from '#pruvious/server'

export default defineCollection({
  name: 'subscribers',
  mode: 'multi',
  dashboard: { icon: 'Mail' },
  fields: {
    email: {
      type: 'text',
      options: {
        label: 'Email address',
        required: true,
        type: 'email',
        autocomplete: 'email',
      },
      additional: {
        index: true,
        unique: 'allLanguages',
        validators: [emailValidator, uniqueValidator],
      },
    },
  },
})

Options

You can specify the following options in the text field:

Option	Description
`autocomplete`	A string specifying autocomplete behavior for the input element. Defaults to `'off'`.
`clearable`	A boolean indicating whether to display a clear button that removes the current input text.
`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, firstName becomes First name.
`name`	A string that specifies the `name` for the input control, influencing autocomplete behavior in some browsers. If not specified, the `name` attribute will be automatically generated.
`overrideType`	A stringified TypeScript type used for overriding the automatically generated field value type. This feature is only applicable when declaring the field in a collection.
`placeholder`	Text that appears in the input element when it has no value set.
`prefix`	A short text to be prepended before the input element.
`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'`.
`suffix`	A short text to be appended after the input element.
`trim`	Specifies whether to remove whitespace from both ends of the input string.
`type`	Input `type` of the control. Defaults to `'text'`.

Last updated on January 5, 2024 at 20:10

Switch

Text area