Error message

Says what is wrong with a field's value and how to fix it, in one plain sentence.

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

const price = ref('twaalf')
</script>

<template>
  <FsField label="Prijs" error="Vul een getal in, zoals 1.234,56" class="w-full max-w-xs">
    <FsInput v-model="price" inputmode="decimal" />
  </FsField>
</template>

Usage

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

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

<template>
  <FsField label="Prijs" error="Vul een getal in, zoals 1.234,56">
    <FsInput v-model="price" />
  </FsField>
</template>

You rarely use FsErrorMessage directly: a Field shows it when you give error, marks the control invalid and connects the two for screen readers. A message about the page or the whole form is an Alert.

Examples

Beside a hint

The error sits next to the hint, never instead of it. Do not repeat the hint's example in the error.

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

const postcode = ref('25')
</script>

<template>
  <FsField label="Postcode" description="Bijvoorbeeld 2514 EA" error="Vul een postcode in van vier cijfers en twee letters" required class="w-full max-w-xs">
    <FsInput v-model="postcode" autocomplete="postal-code" />
  </FsField>
</template>

From your own validation

The field is invalid while it has a message. Clear the message when the value is fine and the error goes.

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

const email = ref('inkoop@jansenbouw')
const error = computed(() => email.value.includes('@') && email.value.includes('.') ? undefined : 'Vul een e-mailadres in, zoals naam@bedrijf.nl')
</script>

<template>
  <FsField label="E-mailadres" :error class="w-full max-w-xs">
    <FsInput v-model="email" type="email" />
  </FsField>
</template>

Say what to fill in and how ("Vul een e-mailadres in, zoals naam@bedrijf.nl"), not "Ongeldig". A control that is read-only or disabled shows no error.

API Reference

FsErrorMessage

Prop	Type	Default	Description
id	string		What a control's `aria-describedby` points at.
prefixText	string		Replaces the hidden "Fout:" or "Error:" said before the message.

Slot	Props	Description
default	any	The message: plain text, one sentence saying what is wrong with the value.