Field

Wraps one control with its label, an optional hint and an error message, and connects them for screen readers.

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

<template>
  <FsField label="Bedrijfsnaam" class="w-full max-w-sm">
    <FsInput autocomplete="organization" />
  </FsField>
</template>

Usage

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

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

<template>
  <FsField label="Bedrijfsnaam">
    <FsInput v-model="name" />
  </FsField>
</template>

Put exactly one control in the field: an input, textarea, number input, select, checkbox or radio group, switch or slider. A checkbox or switch names itself with its own label, so in a field give the field no label; the field adds the description and the error.

Examples

Description

description is one short sentence under the label: a format, an example, a reason. Plain text only.

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

<template>
  <FsField label="Opmerking" description="Voor de bezorger" class="w-full max-w-sm">
    <FsTextarea />
  </FsField>
</template>

Required

required adds the asterisk and marks the control. On a Form, add required-note to the form to explain the asterisk once.

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

<template>
  <FsField label="E-mailadres" required class="w-full max-w-sm">
    <FsInput type="email" autocomplete="email" />
  </FsField>
</template>

Invalid

Give error and the field is invalid, with the message beside an icon. There is no separate invalid prop.

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

const email = ref('inkoop@jansenbouw')
</script>

<template>
  <FsField label="E-mailadres" error="Vul een e-mailadres in, zoals naam@bedrijf.nl" required class="w-full max-w-sm">
    <FsInput v-model="email" type="email" />
  </FsField>
</template>

Read-only and disabled

Set them on the field and the control follows. Neither shows an error.

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

<template>
  <div class="grid w-full max-w-sm gap-4">
    <FsField label="Offertenummer" readonly>
      <FsInput model-value="OF-2026-0142" />
    </FsField>
    <FsField label="Klantnummer" disabled>
      <FsInput model-value="K-20418" />
    </FsField>
  </div>
</template>

A group of options

Around a radio or checkbox group, the label becomes the group's legend.

<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" required class="w-full max-w-sm">
    <FsRadioGroup v-model="moment">
      <FsRadio label="Ochtend" value="ochtend" />
      <FsRadio label="Middag" value="middag" />
      <FsRadio label="Avond" value="avond" />
    </FsRadioGroup>
  </FsField>
</template>

Set size="dense" on the field to pass the dense size down to the control.

API Reference

FsField

Prop	Type	Default	Description
label	string		The question. Not around a checkbox, switch or slider, which name themselves.
description	string		One plain sentence under the label: a format, an example, why it is locked.
error	string		What is wrong with the value, in one plain sentence. While it has text, the field is invalid.
id	string		The control's id. Generated when absent.
size	"default" | "dense"		The control's size; the field's own spacing does not change.
required	boolean	false	Shows the asterisk and marks the control required.
readonly	boolean	false	Focusable and submitted, its value fixed. Say why in the description. Disabled wins.
disabled	boolean	false	Unavailable for now. It wins over `readonly`.

Slot	Props	Description
default	any	One control, as the field's direct child; `v-if`, `<template>` and fragments are fine.