Hint

Helps someone fill in a field with one short sentence: a format, an example, a reason a field is locked.

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

<template>
  <FsField label="Prijs" description="Bijvoorbeeld 1.234,56" class="w-full max-w-xs">
    <FsInput 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" description="Bijvoorbeeld 1.234,56">
    <FsInput v-model="price" />
  </FsField>
</template>

A Field shows the hint from its description and connects it to the control for screen readers. Write "Bijvoorbeeld …" with an example that is valid for the field, and keep it plain text: no link, no list. A problem with the value is an Error message, shown beside the hint.

Examples

Why a field is locked

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

<template>
  <FsField label="Totaalbedrag" description="Berekend uit de regels hieronder" readonly class="w-full max-w-xs">
    <FsInput model-value="€ 1.250,00" />
  </FsField>
</template>

On an option

A checkbox, radio or switch takes its own description, in the same style.

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

const moment = ref<string>()
</script>

<template>
  <FsField label="Moment van levering" class="w-full max-w-sm">
    <FsRadioGroup v-model="moment">
      <FsRadio label="Ochtend" value="ochtend" description="Tussen 8:00 en 12:00" />
      <FsRadio label="Middag" value="middag" description="Tussen 12:00 en 17:00" />
    </FsRadioGroup>
  </FsField>
</template>

Anything longer than a sentence goes above the form.

API Reference

FsHint

Prop	Type	Default	Description
id	string		What a control's `aria-describedby` points at.

Slot	Props	Description
default	any	The hint's text: one plain sentence, with no link, control or list in it.